-
[CSS] aspect-ratio 속성으로 object 비율 맞추기 (+크로스 브라우징)Coding 2023. 7. 13. 11:18반응형
Intro
가로세로 비율을 다룰 수 있는 aspect-ratio 속성은 매우 유용한 기능 중 하나입니다.
img, video, iframe, div 등 모든 태그에 사용가능합니다.
이 유용한 aspect-ratio 속성을 자세히 알아보려고 합니다.
사용방법
사용방법은 간단합니다.
.element { aspect-ratio: 16 / 9; }
aspect-ratio 뒤에 원하는 비율을 적어주기만 하면 됩니다.
내가 원하는 비율을 element에 정의하고 내부 object에 object-fit: cover를 넣어주면
object가 비율에 맞게 꽉 차게 보여 줄 수 있습니다.
.element { aspect-ratio: 16/9; overflow: hidden; } .element img { width: 100%; height: 100%; object-fit: cover; }
object-fit: cover에 대한 자세한 내용은 아래 게시물에서 확인할 수 있습니다.
[CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..)
Intro 보여주고 싶은 이미지 사이즈는 정해져 있는데, 올라오는 이미지 사이즈는 제각각인 경우가 많습니다. 사용해 본 이미지 정렬방법을 정리해 봤습니다. 1. background-size 사용 제 기준에서 제
blog.eomgenie.com
아쉽게도 모든 브라우저에서 이 속성을 지원하지는 않습니다. (ex) IE
자세한 호환 가능 브라우저는 caniuse에서 확인할 수 있습니다.
+ 모든 브라우저 호환가능한 비율 적용방법
< HTML >
<div class="ratio ratio-16x9"> <div class="object"></div> </div>
< CSS >
.ratio { position: relative; width: 100%; } .ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; } .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ratio-1x1 { --tt-aspect-ratio: 100%; } .ratio-4x3 { --tt-aspect-ratio: 75%; } .ratio-3x4 { --tt-aspect-ratio: 132%; } .ratio-16x9 { --tt-aspect-ratio: 56.25%; } .ratio-9x16 { --tt-aspect-ratio: 156.25%; }
ratio 컨테이너에 안에 ::before라는 가상 엘리먼트를 추가해 padding으로 빈 영역을 만들어주고,
ratio 내부의 object들은 전부 absolute로 띄워서 꽉 차게 배치시켜 줍니다.
비율은 ratio-1x1, ratio-4x3 등.. 더블 클래스를 추가해 정의할 수 있습니다.
* 자세한 내용은 bootstrap의 ratio helper 영역에서 확인할 수 있습니다.
Ratios
Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
getbootstrap.com
반응형'Coding' 카테고리의 다른 글
[GSAP] ScrollTrigger 시작 시점 리턴 값 얻는 방법 (0) 2024.03.05 [SCSS] 내 기준 유용하게 사용하고있는 scss mixin 모음 (0) 2023.07.14 [CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..) (0) 2023.07.12 [CSS, JS] 꽃이 흔들거리는 효과 구현하기 (0) 2023.05.19 [CSS] Hover 하는 형제들(siblings) 스타일 적용 (0) 2023.05.12