반응형 이미지 및 비디오 비율 맞추기

반응형 퍼블리싱 작업을 하다 보면 비디오 삽입을 하는경우가 많은데, 자주 요청받는 비율이 16:9 입니다. 

16:9를 어떻게 적용하면 좋을까요? 

Padding-top 혹은 padding-bottom 사용 (동일) 

padding-top: 56.25%를 사용하는 방법이 있습니다. 

 

사용예시

HTML

<div class="container">
  <div class="video-inner">
    <video src=""></video>
  </div>
</div>

 

CSS

.video-inner {
        position: relative;
        padding-bottom: 56.25%;
        width: 500px;
        height: 0;
        background-color: pink;
        overflow: hidden;
      }

      .video video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

---

계산방법

이 56.25%는 

9 / 16 * 100% = 56.25%; 이렇게 나온 계산입니다. 

 

만약 다른 비율을 계산해야 된다면,

padding-top: calc(세로 / 가로 * 100%)

라는 계산식을 활용 할 수 있습니다. 

참고 

https://nikitahl.com/css-aspect-ratio