CSS로 div의 종횡비 유지

질문 : CSS로 div의 종횡비 유지

---

창의 너비가 변경됨에 따라 너비 / 높이를 변경할 수 div 를 만들고 싶습니다.

가로 세로 비율을 유지하면서 너비에 따라 높이를 변경할 수있는 CSS3 규칙이 있습니까?

JavaScript를 통해이 작업을 수행 할 수 있다는 것을 알고 있지만 CSS 만 사용하는 것을 선호합니다.

답변

---

다음과 같이 padding-bottom 대한 백분율 값으로 래퍼 <div>

 

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

컨테이너 너비의 75 % (가로 세로 비율 4 : 3)와 같은 높이를 가진 <div> 가 생성됩니다.

이것은 패딩에 대한 사실에 의존합니다.

백분율은 생성 된 상자의 포함 블록 [...] 너비 와 관련하여 계산됩니다 (출처 : w3.org , 내 강조)

다른 종횡비 및 100 % 너비의 패딩 하단 값 :

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

div에 콘텐츠 배치 :

div의 종횡비를 유지하고 콘텐츠가 늘어나는 것을 방지하려면 절대 위치에있는 자식을 추가하고 다음을 사용하여 래퍼의 가장자리까지 늘려야합니다.

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

여기에 데모 와 다른 심층 데모가 있습니다.

출처 : https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css