[CSS] 이미지 사이즈 맞추기 (크롭화)

 

컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 많다.
사용자가 이미지를 등록하는 경우 이미지가 무너지지 않게 조절할 필요가 있다.

1. object-fit

 

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

img 나 video 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절할 수 있다.
너비와 높이 값을 입력하고, object-fit 속성만 지정해주면 되니 편하다.

object-position 속성을 쓰면 위치 조절도 가능하다.

 

** 다만 IE에서 지원되지 않는다는 점

 

caniuse.com/?search=object-fit

Can I use... Support tables for HTML5, CSS3, etc

 

 

2. position : absolute

 

.container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
 
.container > img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

 

 

이미지를 position : absolute로 띄운 다음, 컨테이너에게 overflow : hidden을 줘서 넘치는 부분을 자르는 방식이다.
이미지를 가운데 정렬하기 위해 top, left, transform 속성이 추가로 필요하다.

width: 100% , heigth: 100%로 지정하면 가로폭, 세로폭에 맞춰 사이즈가 조절된다.

 

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

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

 

 

 

3.  background-size

 

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

 

이미지 태그를 정렬하지 않고, 백그라운드 이미지로 삽입해서 사이즈를 조절하는 방법이다.
속성 하나면 되고, ie9부터 대응하므로 1번, 2번의 장점을 모두 갖고 있다.

하지만 배경으로 들어갔기 때문에 서버에서 이미지 주소를 전달하는 경우, 
인라인 스타일로 background-image를 넣어줘야 한다.

 

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

이렇게 될 경우 이미지 태그를 쓸 수 없으니 SEO나 사용자 경험 측면 (이미지 저장 불가)에서 손해를 볼 수 있다. 

 

 

완벽한 방법은 없으며 상황에 따라 알맞게 사용하면 된다.

 

 

 

출처

 

nykim.work/86

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