aspect-ratio
-
[CSS] 이미지 Layout Shift 방지CSS 2022. 10. 26. 19:15
이미지에 사이즈를 명시해주지 않으면 페이지 레이아웃이 변동(Layout Shift)되는 모습을 종종 볼 수 있다. (이미지 뿐만 아니라 동적으로 삽입되는 컨텐츠, 광고들도 마찬가지) 이는 사용자 경험에 좋지 않다. 따라서 해결방법으로 이미지 사이즈를 명시해주면 된다. 하지만 요즘은 반응형으로 많이 제작하는 터라 직접적인 사이즈를 명시하기보다는 width:100%과 같은 스타일로 작성된 코드들을 많이 볼 수 있다. 이때 aspect-ratio를 사용하면 된다. img { width: 100%; height: auto; aspect-ratio: width / height; } aspect-ratio 속성에 관한 글은 예전글로 대신 대체한다 [CSS] aspect-ratio : 요소의 비율 유지하기 목적 반응..
-
[CSS] aspect-ratio : 요소의 비율 유지하기CSS 2022. 6. 1. 23:58
목적 반응형 요소를 만들 때 이미지(요소)의 비율을 그대로 유지하려고 한다. 비율은 16:9로 가정하였다. 방법 1. padding-bottom (or padding-top) 2. aspect-ratio 1. padding-bottom (or padding-top) .wrapper { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%; } .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - height를 0, padding-bottom 값을 %로 지정하여 너비에 따라 보여질 높이의 비율을 정할 수 있다. - 요소의 ..