가로 세로 비율을 유지하면서 부모 div에 맞게 사각형 div 크기를 조정하십시오.

Question

그래서 이것이 나를 미치게했습니다. 순수한 CSS로이 작업을 수행 할 수있는 방법이 있는지 궁금합니다. 내가하려고하는 것은 고정 된 높이의 부모 div (보라색)를 갖는 것입니다. 그 보라색 div 안에 오렌지색 div를 유지하고 가로 세로 비율을 유지하고 상위 div의 높이까지 비율을 바꿉니다. 상위 div의 크기를 변경하면 주황색 div가 가로 세로 비율에 맞게 조정됩니다.

참고 : 이미지 또는 비율로 부모 높이가 없으면이를 수행하려고합니다.

참조 예 :

Answer 1

당신은 몇 가지 간단한 JS와 함께 할 수 있습니다. 아이 (또는 부모)의 높이를 가져 와서 너비를 설정하십시오. 필요에 따라 계산을 사용하여 원하는 비율을 얻을 수 있습니다.

var width = document.getElementById('child').offsetHeight; 
 
document.getElementById('child').style.width = width + 'px';

#parent{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: purple; 
 
} 
 
#child{ 
 
    height: 100%; 
 
    background-color: yellow; 
 
}

<div id="parent"> 
 
    <div id="child"></div> 
 
</div>

[DIV 높이에 따라 종횡비를 유지]의