CSS - 반응형 16:9 비율 유지하는 법
하수도키
·2020. 7. 18. 18:20
728x90
반응형
SMALL
CSS - 반응형 16:9 비율 유지
개요
- 이 https://css-tricks.com/aspect-ratio-boxes/ 페이지를 보고 번역/의역을 했습니다.
- 자세한 내용은 위 링크를 참고해주세요.
- 유투브 동영상 또는 반응형 작업시에 필요한 비율에 대해 다뤄봤습니다.
padding-top 사용
padding-top또는padding-bottom사용padding값은 요소의width을 참조한다.width값이 100px이고padding이 20%이면 px로 계산하면 20px이다.padding-top을56.25%을 주면 16:9 비율로 보인다.
height: 0을 주면 박스 모델 높이에 영향을 주는 것이padding-top밖에 없다.
.video {
overflow:hidden;
padding-bottom:56.25%; /*Using 20% for padding makes the height of the box equal to 20% of its width.*/
position:relative;
height:0;
}
.video iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}<div class="video">
<iframe width="560" height="315" src="youtube address" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>비율 계산하기
- 항상 비율이 16:9로 같지 않으므로
56.25%로 계속 사용할 수 없고 비율에 맞게 조정해야 한다. - 비율을 구하는 방법은
calc를 이용한다.
// 공식
padding-top: calc(세로 / 가로 * 100%);
// 예)
padding-top: calc(591.44 / 1127.34 * 100%); 컨텐츠 넣기
.aposect-ratio-box에 백그라운드에 이미지를 사용해 비율대로 줄일 수가 있다.- 컨텐츠를 넣게 되면
padding때문에 영역밖으로 나가게 되고overflow: hidden가 적용되어 보이지가 않는다. - 이럴땐 안에 영역을 하나 더 만들고
position: absolute로 띄운다.
.aspect-ratio-box {
height: 0;
overflow: hidden;
padding-top: calc(591.44 / 1127.34 * 100%);
background: blueviolet;
position: relative;
}
.aspect-ratio-box-inside {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<h1 class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
Happy Birthday
</div>
</h1>- 여기서 가운데 정렬까지 하고 싶으면 아래와 같이
display: flex를 사용한다. - 폰트 사이즈까지 줄일려면
.viewport-sizing를 추가한다.
.flexbox-centering {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.viewport-sizing {
font-size: 5vw;
}<h1 class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<div class="flexbox-centering">
<div class="viewport-sizing">
Happy Birthday
</div>
</div>
</div>
</h1>컨텐츠가 길어질 경우
overflow: hidden이므로 컨텐츠가 길어지면 내용이 짤린다.해결방법
overflow: auto사용스크롤이 생겨 내리면서 볼 수 있지만 디자인이 보기엔 좋지 않다.
.aspect-ratio-box { height: 0; /*overflow: hidden;*/ overflow: auto; padding-top: calc(591.44 / 1127.34 * 100%); background: blueviolet; position: relative; }구조 변경(가상클래스 사용 :
after, before)display: flex를 제거하므로 가운데 정렬을 할 수 없다.
.aspect-ratio-box { background: blue; } .aspect-ratio-box::before { content: ""; width: 1px; margin-left: -1px; float: left; height: 0; padding-top: calc(591.44 / 1127.34 * 100%); } .aspect-ratio-box::after { /* to clear float */ content: ""; display: table; clear: both; }<h1 class=".aspect-ratio-box"> /* Contents */ </h1>
video(iframe) 비율대로 줄이기
- 브라우저 지원
- IE9 이상 가능, 나머지는 확인 중
- 동영상(
iframe)위에 감싸주는 태그를 작성 후 적용한다.
<head>
<script src="./jquery.fitvids.js"></script>
</head>
<body>
<div class="video">
<iframe width="560" height="315" src="동영상 주소" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<script>
$(".video").fitVids();
</script>
</body>- 위 소스코드는 https://codepen.io/chriscoyier/pen/zzvyrr 참고
결론
- 반응형 비율, 동영상, 유투브 작업할때 항상 손 쉽게 할 수 있을 것 같다.
- 역시 안되는건 없고, 내가 모르는 것이다.
728x90
반응형
LIST
'개발일기 > CSS' 카테고리의 다른 글
| [CSS, 책리뷰] 새로운 CSS 레이아웃 - 살펴보기#1 (CSS LAYOUT, float, flex-box, BFC, grid) (0) | 2021.11.04 |
|---|---|
| [CSS] CSS로 삼각형, 꺽쇠(체크박스), 화살표, 스피너, 햄버거 메뉴 그리기 (0) | 2021.09.22 |
| input, image 등에서 ::before 를 사용할 수 없는 이유? (1) | 2020.09.08 |
