[CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..)

Intro

보여주고 싶은 이미지 사이즈는 정해져 있는데,

올라오는 이미지 사이즈는 제각각인 경우가 많습니다.

사용해 본 이미지 정렬방법을 정리해 봤습니다.

---

1. background-size 사용

제 기준에서 제일 간단한 방법입니다.

꼭 img 태그를 사용해야 하는 경우가 아니라면,

여러 브라우저 대응에도 문제없이 사용가능한 방법입니다.

 

 

이미지는 비율을 유지하고 컨테이너에 맞게 이미지를 꽉채운 후 넘치는 부분은 잘라냅니다.

 

넘치는 이미지의 상하좌우를 균일하게 잘라내고 이미지의 가운데 부분만 보이게 하고싶다면,

background-position: center center;

위 속성을 꼭 넣어야합니다.

---

2. image에 position: absolute 사용

bootstrap에서 ratio helper와 비슷한 방법입니다.

컨테이너 사이즈를 기준으로 이미지를 absolute로 띄우고 컨테이너 밖으로 나가는 부분은 잘라냅니다.

 

 

잘려나가는 부분이 있겠지만

이미지가 아니더라도 video, iframe 모두 사용 가능하고,

브라우저 대응에도 문제가 없어서 데스크톱 화면 작업 시 유용하게 사용할 수 있습니다.

---

3. object-fit 사용

영어 그대로입니다.

object(image나 video)의 크기를 어떤 방식으로 맞출 것인지 설정할 수 있습니다.

contain	object가 가로세로비율을 유지하면서 컨테이너 박스에 맞게 크기를 줄입니다.
cover	object의 비율을 유지하면서, 컨테이너에 가득차게 보입니다. 넘치는 부분은 잘려나갑니다.
fill (default)	정의한 사이즈에 맞게 object가 늘어납니다.
none	크기를 조절하지 않습니다.
scale-down	none과 contain 중 크기가 더 작아지는 값을 선택합니다.

 

겉을 감싸고 있는 컨테이너를 기준으로 object의 크기를 맞출수도 있고,

 

 

object에 사이즈를 지정해서 그 사이즈 기준으로 맞출 수 있습니다.

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

간편하게 사용할 수 있지만,

IE는 지원하지 않아서 저는 주로 모바일 화면에서 사용합니다.