Prolog

컨테이너 크기는 고정되어 있는데, 안에 들어갈 이미지의 크기는 다양한 경우가 많다.
이 때 이미지가 깨지지 않게 하기 위한 몇 가지 Tip을 정리해 보고자 한다.

1. object-fit

img, video같은 object의 size를 컨테이너 크기에 맞게 조절할 수 있다.

  img {
    width: 300px;
    height: 200px;
    object-fit: cover; /* w, h 비율을 유지하며 컨테이너에 꽉 참 */
  }

이외에도 fill, contain, none, scale-down 속성이 있음...
※ 단, IE는 지원하지 않는다.

2. position: absolute;

img를 absolute로 띄우고, 컨테이너에 overflow: hidden;을 주는 방식

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

  .container > img {
    position: absolute;
    width: 100%; /* width: 100%;는 가로폭, height: 100%;는 세로폭에 맞춰 사이즈 조절 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

※ IE에서 object-fit이 적용되지 않을 때 대체할 수 있는 방법으로, transfrom을 지원하지 않는 IE8 이하에서는 margin-top, margin-left 음수 값으로 조절해야 한다.

3. background-size

이미지 태그를 사용하지 않고, 백그라운드로 삽입하는 방식

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

※ SEO나 사용자 경험 측면에서 불리하고, IE9+ 가능

Epilogue

3가지 방법 모두 장단점이 있고, 적용 가능한 범위가 제한적이므로 상황에 따라 적절한 방법을 선택해서 사용하자.