[CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background)

 

 

프롤로그

컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있습니다.

사용자가 이미지를 등록하는 경우 또는 마케팅 팀이 아무 이미지나 넣는 경우 이미지가 무너지지 않게 조절할 필요가 있죠.

 

이번에 object-fit 이란 속성을 알게 되면서,

이미지를 컨테이너 안에서 정렬하는 3가지 방법을 정리해봤습니다 🙋‍♀️

 

 

 

---

 

 

1. object-fit

<img>나 <video> 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절할 수 있어요.

너비와 높이값을 입력하고, object-fit 속성만 지정해주면 되니 편합니다.

 

img {
  width: 300px;
  height: 150px;
  object-fit: cover;
}

 

 

object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너에 꽉 차도록 설정됩니다.

(배경이미지에서 쓰는 background-size: cover와 같아요!)

다만 IE에서 지원되지 않는다는 점이 아쉽네요ㅠ.ㅠ (참고: Can I Use)

 

이 속성에서 사용할 수 있는 값은 아래와 같습니다.

 

fill	기본값. 주어진 너비와 높이에 딱 맞도록 사이즈를 조절합니다. 이미지의 가로세로 비율은 유지되지 않아요.
contain	가로세로 비율을 유지한 채로 사이즈가 조절되지만, 이미지와 컨테이너 간의 비율이 맞지 않는 경우엔 자리가 남게 됩니다.
cover	가로세로 비율을 유지한 채로 사이즈가 조절되며, 비율이 맞지 않더라도 이미지를 확대해 컨테이너를 완전히 채웁니다.
none	아무것도 하지 않고 본래의 이미지 사이즈를 유지합니다. 그래도 이미지 가운데가 보여지도록 하는 센스가 있어요.
scale-down	none 또는 contain 중에 더 적절한 방향으로 이미지 사이즈를 조절합니다.

 

구체적으로 어떻게 표시되는지는 아래 데모를 참고하세요!

 

 

See the Pen object-fit: CSS Property by nanalike (@nykim_) on CodePen.

 

 

여기서 다루지는 않았지만, object-position 속성을 쓰면 위치 조절도 가능해요. (참고: MDN)

 

object-fit

- 특징: 이미지 태그나 비디오 태그에 사용
- 장점: 속성 하나로 설정 가능
- 단점: IE 미지원

 

 

---

 

 

2. position: absolute

이미지를 position: absolute로 띄운 다음, 컨테이너에게 overflow:hidden을 줘서 넘치는 부분을 자르는 방식입니다.

이미지를 가운데 정렬하기 위해 top, left, transform 속성이 추가로 필요합니다.

 

.container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.container > img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

width: 100%;로 지정하면 가로폭에 맞춰, height:100%로 지정하면 세로폭에 맞춰 사이즈가 조절됩니다.

 

구체적으로 어떻게 표시되는지는 아래 데모를 참고하세요! (2)

 

 

See the Pen Absolute position for images by nanalike (@nykim_) on CodePen.

 

 

 

IE에서 object-fit이 먹히지 않을 때 대체할 수 있는 방법이 되겠네요!

(단, transform을 지원하지 않는 IE8 이하에서는 margin-top과 margin-left로 음수값을 줘야 합니다.)

 

position:absolute

- 특징: 이미지를 가운데 정렬 후 넘치는 부분 제거
- 장점: IE 대응 가능
- 단점: 너무 많은 속성

 

 

---

 

 

3. background-size

이미지 태그를 정렬하지 않고, 백그라운드 이미지로 삽입해서 사이즈를 조절하는 방법이에요.

속성 하나면 되고, IE9부터 대응하므로 1번과 2번의 장점을 모두 갖고 있는 멋진 녀석이죠!

 

.image {
  background-image: url("./images/nana.jpg");
  background-size: cover;
}

 

하지만 좋아하긴 이른 것 같아요... 배경으로 들어갔을 때만 사용할 수 있기에 이미지 태그에는 사용할 수 없거든요 😵

즉, background-image로 삽입된 이미지에만 적용할 수 있는 속성입니다.

 

따라서 서버에서 이미지 주소를 전달하는 경우, 아래처럼 인라인 스타일로 background-image를 넣어줘야 합니다.

 

<div style="background-image: url('./images/nana.gif')"></div>

 

이렇게 되면 이미지 태그를 쓸 수 없으니 SEO나 사용자 경험 측면(ex. 이미지 저장 불가)에서 손해를 볼 수도 있겠네요.

 

 

사용할 수 있는 속성은 아래와 같습니다.

(여기서 contain과 cover 는 object-fit에서 쓰는 속성과 결과물이 동일해요.)

 

contain	이미지의 가로세로 비율을 유지하면서, 이미지가 잘리지 않을 때까지만 채웁니다.
cover	이미지의 가로세로 비율을 유지하면서, 이미지가 잘리더라도 주어진 크기를 꽉 채웁니다.
사이즈 직접 입력 (100%, 200px, 50em 등)	비율에 무관하게 입력한 값에 맞춰 사이즈를 조절합니다. 하나만 입력하면 가로값만, 쉼표 없이 두 개를 입력하면 가로값과 세로값을 동시에 설정합니다.

 

 

보통 background-position 속성을 함께 써서 배경 이미지의 위치도 조절해요.

구체적으로 어떻게 표시되는지는 아래 데모를 참고하세요! (3)

 

See the Pen background-size Property by nanalike (@nykim_) on CodePen.

 

 

background-size

- 특징: 배경이미지에 사용
- 장점: 속성 하나로 설정 가능, IE9+ 지원
- 단점: 배경이미지에만 사용 가능

 

 

 

---

 

 

 

어떤 방법을 사용하더라도 결과물은 비슷하게 만들어낼 수 있어요!

아래는 세 가지 방법을 모두 사용해 이미지를 같은 모습으로 정렬한 예시입니다.

 

See the Pen Sizing & Cropping Images (3 Types) by nanalike (@nykim_) on CodePen.

 

 

 

 

---

 

 

 

에필로그

이상 이미지 정리법을 알아봤는데요!

결국 완벽한 방법은 없는 것 같아요~~

상황에 따라 적절한 방법을 택하는 것을 추천드려요~~^^

 

 

(어느새 상징이 되어버린 그...)