thumbnail wrapper 썸네일 래퍼 만들기

프로필 이미지, 상품 이미지 등 우리는 이미지를 잘라서 특정영역에 맞춰 넣을 경우가 종종 존재합니다.
이럴 때, 원하는 의미에 맞춰서 이미지를 컨테이너 안에 넣어야 하는데요. 이를 위해 html 구조를 2단으로 가져갑니다.

<div class="image_wrapper_square fit">
  <img src="./images/apples_square.jpg" alt="정사각형" />
</div>

이미지를 어떤 방식으로 컨테이너에 맞춰 넣을것인가는 크게 두가지가 있습니다.
컨테이너 안에 이미지가 다 보이도록 하거나, 컨테이너에 꽉 차게 이미지를 채우는 경우 입니다.

(1) 컨테이너 안에 이미지가 다 보이기

다 보이게 하려면 이미지의 가로와 세로가 전부 컨테이너의 크기보다 크면 안되겠죠.

.image_wrapper_rectangle.fit img {
  max-width: 100%;
  max-height: 100%;
}

(2) 컨테이너에 꽉 차게 이미지를 채우기

컨테이너가 가로가 더 긴지, 세로가 더 긴지에 따라 맞춰 조정해주면 됩니다. 더 긴 쪽을 100%로 잡아주고, 반대쪽을 auto로 지정합니다.

.image_wrapper_rectangle.cover img {
  max-width: 100%;
  height: auto;
}

상세한 예제는 아래 버튼을 통해 확인 가능합니다.
예제에는 background로 들어간 이미지에 대한 예제도 함께 있습니다.