[TIL] 반응형에서 이미지 종횡 비율 맞추기
생소했던 내용이라 강의를 두 번 듣고, 여러번 머릿속으로 복기한 다음 글로도 정리해본다.
👀 반응형에서 이미지 종횡 비율 맞추기 (1:1 비율 이미지 만들기)
-
% 와 px의 개념은 다르다.
-
width
의 100%는 명확하지만,height
의 100%는 부모에 명확한 px값이 없다면 명확하지 않아진다. -
반응형 제작 시
width
는 100%를 주면 디바이스에 따라 px 사이즈가 변화하지만, 세로는 안된다. -
padding
과margin
의 % 기준은width
를 따른다. -
따라서 반응형에서 정사각형 이미지를 만들기 위해
padding
을 사용한다.
.img-parent {
width: 100%;
height: 0;
padding-bottom: 100%;
img {
display: block;
width: 100%;
height: 100%;
}
}
-
이렇게 하면
img
의 높이는 부모의height
가0
이기 때문에0
이 되어버린다. -
그래서
position: absolute;
를 사용해준다. 왜인지는 잘 모른다. 그냥 css가 그렇다면 그런거다. -
그리고 맨날 까먹는 속성..
object-fit
을 사용해 이미지 소스를 배치해준다.
.img-parent {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
img {
position: absolute;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
그래서 1:1 비율의 이미지 소스가 아니더라도 정사각형 box에 맞게 예쁘게 배치 완료!
Author And Source
이 문제에 관하여([TIL] 반응형에서 이미지 종횡 비율 맞추기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jessie/TIL-반응형에서-이미지-종횡-비율-맞추기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)