플렉스 박스 이미지 스타일링

developsy·2022년 5월 16일

이미지 크기 맞추기

.destination img{
    height: 200px;
}

플렉스 박스의 항목 중 이미지의 크기를 height으로 맞춰주었다. 하지만 웹페이지에서 개발자도구로 이미지의 크기를 봐보자.

벨로그에서 이미지를 어떻게 좌우로 배치하는지 모르겠다..

아무튼 이미지의 크기가 전부 제각각이다. 이는 이미지 파일 자체의 해상도 때문에 발생하는 문제이다.

Barcelona의 이미지의 해상도가 1980x1440으로 가장 크므로 height을 맞추는 과정에서 가장 줄어들었다. 그러므로 추가로 width를 사용하면 이미지의 크기를 동일하게 맞출 수 있다.

.destination img{
    height: 200px;
    width: 250px;
}

만약 페이지 크기에 맞추어 이미지가 동적으로 크고 작아지게 만들고 싶다면

.destination img{
    height: 200px;
    width: 100%;
}

을 사용한다. 그런데 이렇게하면 또 이미지의 크기가 서로 달라지는 결과가 나왔다. 이때는 이미지의 width를 유지한 채로 플렉스박스의 항목에 flex속성을 사용하면 해결되었다.

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다.

flex: 1;

로 설정하니 이미지가 딱 맞게 배치되었다.

이렇게 해결하긴 했는데, 나중에 더 알아보니 상위항목에 width를 지정하지 않아서 발생한 문제같다.

object-fit속성의 기본값은 fill인데, 이는 주어진 치수에 맞게 이미지들을 조절한다는 뜻이다.

object-fit: fill;

하지만 컨테이너 안에서 이미지가 늘어나거나 찌그러지는 상황이 발생할 수 있다.

위의 이미지는 문제없으나 다른 이미지는 이상하게 보일 수 있는 것이다. 그러므로 다른 속성값을 사용해야 한다.

먼저 속성값으로 contain을 주게 되면 이미지가 컨테이너에 맞게 조절된다. 즉 컨테이너의 비율에 따라 빈 공간이 생길 수도 있다.

object-fit: contain;

빈공간이 생겨서 보기가 싫다.

속성값으로 cover를 주면 이미지의 종횡비가 그대로 유지되면서 컨테이너에 딱 맞도록 조절해준다.

object-fit: cover;

이미지가 보기좋게, 찌그러지거나 확대되지도 않고 제대로 들어갔다.

공부 정리용 블로그