CSS/CSS 기초
이미지 비율 맞추기
알찬 퍼블리셔
2022. 8. 22. 14:04
728x90
반응형
.img-box::after 또는 ::before를 통해 width:100%; padding-bottom:100%; 또는 padding-top:100%; 로 가로세로 높이를 1:1로 맞춘다
이미지는 absolute를 통해 top:0;left:0;에 위치시킨다 (::after 또는 ::before의 패딩과 겹쳐지도록)
.img-box의 width - height 를 100%로 크기를 꽉채운다
object-fit 을 모른다면
[CSS/CSS 기초] - [CSS]Object-fit 이미지나 비디오 크기에 맞춰 자르는 방법
728x90
반응형