Genie of the Lamp 😶‍🌫️ Genie of the Lamp 😶‍🌫️

aspect-ratio 크로스 브라우저

• [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: 10..

  Read More