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
반응형
'CSS > CSS 기초' 카테고리의 다른 글
| position sticky로 floating 버튼 만들기 (0) | 2022.08.24 |
|---|---|
| 글자 영역 밖으로 벗어나면 자르기 (0) | 2022.08.23 |
| box-shadow 예제 모음사이트 (0) | 2022.08.12 |
| ::before / ::after content에 특수문자 코드로 쓰기 (0) | 2022.08.10 |
| css에 계산 결과값 넣기 (0) | 2022.08.09 |
댓글