CSS로 세로 사진 좌우에 블러 효과 넣기 backdrop filter

세로 이미지를 가로 썸네일로 표현해야 할 때는 이렇게 위아래를 자르면 좋지 않은 경우가 있습니다. 얼굴이 잘리는 경우는 가장 안 좋죠.

그래서 위와 같이 좌우를 블러로 채워 표현하는 게 좋을 때가 있습니다. 저 같은 경우 PHP 이미지 라이브러리를 사용해 구현을 했었는데요.

최근에 우연히 CSS를 이용해서 이걸 구현할 수 있는 방법을 찾았습니다. 아래 코드펜을 참고해 보세요.

HTML은 아래처럼 깔끔합니다.

<div class="image-container">
  <img class="image-container__img" src="cat.jpg" alt="">
</div>

CSS 역시 이렇게 깔끔하고요.

.image-container {
  width: 480px;
  height: 270px;
  background-image: url(cat.jpg);
  background-size: cover;
  background-position: center;
}

.image-container__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* iOS 사파리를 위한 코드입니다. */
}

이미지가 컨테이너 너비와 높이를 따라간다는 점, 컨테이너에 배경 이미지를 깔아야 한다는 점을 주의하시면 됩니다.