div의 높이를 컨테이너의 백분율로 설정합니다.

Question

.container div인데 최대 너비가 600px이거나 100%입니다.

이 div의 내부에는 .content div이고 컨테이너 폭의 100 %의 60 %가되고 싶습니다.

는 더 일반적으로 내가 대신 평방의 반응 사각형 사업부를 만들기 위해 노력하고있어.

<div class="container"> 
    <div class="content"> 
     <img src="..." /> 
    </div> 
</div> 

내 CSS의 외모 : 내 HTML은

입니다

http://jsfiddle.net/7zE9x/ (가 오버 플로워해야 내용 내부의 이미지 및 가지고 Y-스크롤 막대)

like :

.container { 
    background: black; 
    padding: 3%; 
    position: relative; 
    width: 100%; 
    max-width: 600px; 
} 

.content { 
    overflow: auto; 
    height: 60%; /* Set this to 400px, meaning that it won't be responsive */ 
} 

.content img { 
    display:block; 
    width: 100%; 
} 

.content div의 높이를 400px으로 설정하면 백분율이 아닙니다. 따라서 크기가 변경되지 않습니다. 즉 컨테이너의 너비가 200px 인 경우 div의 높이는 120px이어야합니다.

Answer 1

.container의 경우 높이를으로 설정해야합니다.

자녀가 부모의 신장을 모르는 경우 비율에 따라 어떻게 조절합니까 ??? 당신이 부모로부터 높이/폭을하는 비율을 설정하면

는 Fiddle

body { 
    padding: 80px; 
} 

.container { 
    background: black; 
    padding: 3%; 
    position: relative; 
    width: 100%; 
    max-width: 600px; 
    height:500px;/* Set height as per your wish. */ 
} 

.content { 
    overflow: auto; 
    height:50%; /* Adjust height accordingly. */ 
} 

.content img { 
    display:block; 
    width: 100%; 
}