두 개의 전체 화면 열을 만드는 방법 (첫 번째는 반응 형 이미지, 두 번째는 텍스트)

Question

2 열로 페이지를 만들려고합니다. 첫 번째는 화면의 70 %를 차지하고 다른 열은 20 %를 차지합니다.

첫 번째 열에서 CSS 또는 스크립트를 사용하여 반응 형 이미지를 넣으려고하지만 내 눈을 만족시키는 것은 없습니다.

의견이 있으십니까?

감사합니다.

예 : http://www.screencast.com/t/0SddrUSln5

일부 기술은 다음 :

1) 부트 스트랩 ...

<div class="col-xs-12 col-sm-6 col-lg-10"> 
<img src="img/intro_img.jpg" alt="" style="width:100%;"> 
</div> 

<div class="col-xs-6 col-lg-2"> 
sidebar 
</div> 

2) 전체 화면 JQuery와 스크립트

http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/

하지만 내가 할 수있는 생성 방법을 알아 내지 못한다. 사이드 바는 전체 화면 이미지를 "밀어 내며"겹쳐지지 않습니다.

3) Class "responsive-img"

Τhe 포토 절대 70 % 80 ορ 화면 %, 매우 얇은 흰 여백 하단 존재 채워 없다. 사실 83,67 ... %에서 84 % 스크롤 막대가 나타나면 전체 화면 열이 표시되지 않습니다.

나는 무엇을 당신의 묻는

Answer 1

확실하지 ... 내가 제대로 설명 할 수 있도록 노력하겠습니다 ... 새로운 사람이 여기 있어요 ....하지만 사업부의 폭을 설정하려는 경우에만 채택하는 당신이 사용할 수있는 화면의 20 % :

#div{ 
width: 20% 
} 

는 단지 사업부의 id를 가진 div 태그를 확인하고이를 화면의 20 %를 차지합니다.

당신의 요구 사항은 무엇입니까?

Answer 2

귀하의 설명에서 이해할 수 있습니다. jsfiddle

내가 어디에서 붙어 있는지 정확히 알 수 있습니까?

HTML

<div class="content"> 
    <img src="http://placekitten.com/200/300" class="responsive-img" /> 
</div> 
<div class="sidebar"> 
    text here 
</div> 

CSS

.sidebar { 
    width: 20%; 
    float: right; 
    border: 1px solid; 
    min-height: 250px; 
} 
.content { 
    width: 70%; 
    float: left; 
    border: 1px solid; 
    min-height: 250px; 
} 
.responsive-img { 
    width: 100%; 
}