![[CSS] aspect ratio](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FDFOJc%2Fbtse95lpYsl%2FAAAAAAAAAAAAAAAAAAAAALoyegT1OiAIx3IeIqTGHzPST44YIK10bMP4uLiYVk4B%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1769871599%26allow_ip%3D%26allow_referer%3D%26signature%3DgeJCp6hR4qGHMihhn43R9L4ov3E%253D)
❗ ios 구버전에서는 작동하지 않는다.
aspect-ratio와 padding-bottom: % 를 같이 사용하면 좋을 듯 하다.
aspect-ratio : 자동 크기 계산 및 기타 레이아웃 기능에 사용되는 박스의 기본 가로 세로 비율을 설정해준다.
👉 리스트 썸네일이 필요한 페이지에서 사용하기 좋은 css이다.
e.g. 자주 사용하는 리스트!
Can I Use 👉 IE 제외 사용 가능!
출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
aspect-ratio - CSS: Cascading Style Sheets | MDN
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
developer.mozilla.org
https://caniuse.com/?search=Aspect%20Ratio
"Aspect Ratio" | Can I use... Support tables for HTML5, CSS3, etc
CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains
caniuse.com
'Web > Styles' 카테고리의 다른 글
| [css] 변수를 음수로 지정하고 싶을 때 (0) | 2023.06.23 |
|---|---|
| [CSS] 뒤가 투명한 png 이미지 하얗게 변환 (0) | 2023.05.31 |
| [scss] BEM 방식으로 깊은 중첩 하기 (0) | 2023.01.18 |
| [CSS 방법론] BEM 방식 (0) | 2022.11.28 |
| [SVG] svg 백그라운드로 사용하기 (0) | 2021.11.18 |