frame 비율 구하는 방법

● PC기준 16:9 비율

2160p 3840x2160
1440p 2560x1440
1080p 1920x1080
720p 1280x720
480p 1280x720
360p 640x360
240p 426x240

✏️ 해상도에 따라 비율 구하기

16:9일 경우, 0.5625%의 비율을 사용해서 css 구현

4:3 경우 -> 3/4 = 0.75%
16:9 경우 -> 9/16 = 0.5625%
*21:9 경우 -> 9/21 = 0.42857140%

19:6 기준

[html]

<div class="slide_wrap">
<img src="#">
</div>

[css]

.slide_wrap{position:relavtive; padding-bottom:56.25%;}
.slide_wrap img{position:absolute; width:100%; height:100%;}

css는 해당태그의 부모태그, slide_wrap에 padding-bottom값을 적용한다.
4:3 경우 -> 3/4 = 75%
16:9 경우 -> 9/16 = 56.25%
*21:9 경우 -> 9/21 = 42.86%