CSS: 화면 너비(width)의 비율 값을 height에 적용하기 (가로:세로 비율 강제 지정)

CSS에서 width, height에 픽셀을 직접 입력하면 항목의 크기가 고정이 되고, 각각을 %로 하면 항목 내부에 높이가 다른 이미지를 다루는 경우에 서로 높이가 달라진다.

width의 경우에는 화면 너비의 %로 지정하고, 그 width와 동일한 값 또는 width의 비율로 표현되는 어떤 값을 height에 적용하고 싶을 때는 vw 단위를 쓸 수 있다.

CSS:

.test {

width: 100vw;

height: 80vw;

}

HTML:

<div class="test">

<img src="......(크기가 서로 다른 이미지)">

</div>

물론 이 방법은 무조건 요소(div)의 크기를 화면 너비에 맞춰서 일정한 비율로 유지하는 데 있으므로, 이미지의 고유한 비율은 당연히 망가지게 된다. 그것을 감수하고 박스 크기를 강제 지정하고 싶을 때 쓰면 될 것 같다. (가령 비디오 플레이어 같은 요소의 크기 지정할 때)

<참고자료>

[1] http://stackoverflow.com/questions/21537806/css-height-same-as-width

[2] https://drafts.csswg.org/css-values/#vw