[html, css] 비율 유지하면서 이미지or동영상 줄어들게 하기 - 반응형 코딩

브라우저 줄였을 때, 동영상 비율 유지하는 방법

---

[해상도 목록]

21:9 / 16:9 / 4:3

==> 16:9 해상도 또는 해상도 목록 이라고 구글링하면 해상도에 관련된 사이즈를 찾으 실 수 있습니다.

---

[가로값 기준의 정비율 높이값 구하기]

높이 / 가로 x 100

(Ex)
16 : 9 ==> 560 : 315
315 / 560 x 100 = 56.25

 

동영상 감싸는 태그에 relative와 계산된 해상도 값만큼 padding값을 줍니다. 

(padding-top, padding-bottom 둘 중 편한걸로 사용하세요.)

동영상 태그를 absolute로 띄워 left:0; right:0; top:0; bottom:0; width:100%; height:100%을 주어 영역에 꽉 차게 해줍니다.

 

 

*아래 코드는 16:9 해상도 기준으로 작성되었습니다.

See the Pen jOrJXRG by 허금영 (@gephqhwv) on CodePen.