이 글은 Can I scale a div's height proportionally to its width using CSS?입니다. 내가 원하는대로 다행히 sclae로 divs를 얻을 수 있습니다. 그러나, 내가 필요로하는 것은 div에 대한 최소 높이를 설정하는 것입니다.동일한 높이에 비례하여 동일한 줄의 배율을 조정하십시오. 최소 높이를 가져야합니다.
이 바이올린에서 http://jsfiddle.net/FBZuB/1/ 나는 성취하려는 것을 설정했습니다. BLUE div는 BLUE div의 너비에 따라 RED div의 높이를 정의하는 일반 래퍼입니다. 그러나 RED div의 최소 높이를 변경하려고 할 때, 배율을 조정하고 최소 높이를 갖는 div는 예기치 않은 결과가 발생합니다.
나는 일단 최소 높이 포인트로 스케일을 조정하면 div가 스케일링을 멈추고 너비 만 변경한다고 생각합니다. 그러나 min-height를 설정하는 것만으로 전체 계산을위한 기본점을 설정하고 모든 것이 계속 확장됩니다. 나는 이것이 의미가 있기를 바랍니다.
RED div의 크기가 위아래로 조정되어야하지만 특정 시점에서 RED div가 최소 높이에 도달하면 높이의 배율과 너비 만 축소해야합니다. 전에 순수 자바 스크립트로이 작업을 수행했지만 위의 게시물을 읽은 이후 CSS 전용 솔루션을 얻으려고합니다.
다음은 코드입니다. 지금은 내용을 무시할 수 있습니다 ... 나는 주로 빨간색 블록에 중점을 둡니다. 비율이 최소 높이에 도달 할 때까지 너비/높이의 비율을 비례 적으로 조정 한 다음 높이와 너비 만 크기 조절을 중지해야합니다.
HTML
<div style="background: blue; width: 70%;">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
</div>
</div>
CSS
div {
margin: 5%;
float: left;
background: red;
position: relative;
}
#left {
width: 50%;
padding-bottom: 60%;
min-height: 100px;
}
#right {
width: 30%;
padding-bottom: 60%;
min-height: 100px;
}
.content {
position: absolute;
width: 90%;
margin: 5%;
background: green;
top: 0;
left: 0;
height: 90%;
}
파란색 div는 화면 너비 또는 기타 알려진 요인에 따라 최대 너비라고 가정합니다. – Leeish