개발

img 태그로 background-size: cover 적용하기

57 views as of December 31, 2024.

기존 이미지 채우기
Object 제어 스타일

기존 이미지 채우기

퍼블리싱을 하다보면 지정된 박스 크기에 이미지를 정확하게 끼워 넣고 싶을때,

우리는 일반적으로 아래와 같은 스타일 코드로 이미지를 박스안에 배정하고 위치와 사이즈를 조정한다.

.grp_image {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}Copy

그리고 아래와 같이 실제 div.grp_image 태그에 이미지 경로를 할당한다.

<div class="grp_image" style="background-image: url('https://cdn.erulabo.com/editor/dmGYinXdFvdn7HGV0APqFohtFDv39Y9maLPA170d_optimized.webp')"></div>Copy

광고가 로딩이 안되면 보이는 애니리뷰 배너

그러면 위의 이미지처럼 가로 300px, 세로 600px, 1:2 비율을 가진 박스 사이즈에 이보다 더크고 비율이 안맞는 이미지를 배정해도 알아서 이미지 비율을 유지하면서 꽉차게 보인다.

근데 이런 방식의 큰 문제점이라고 한다면, 요즘 웹사이트 최적화 방식중 하나인 Lazy Loading, 즉 지연 로딩 방식을 지원하지 않는다는 것이다.

물론 스크립트를 통해 뷰포트에 들어올때 동적으로 background-image 경로를 배정해주면 유사 지연 로딩처럼 작동할 수 있긴한데, 단순히 스타일 코드단에서 해결되야할 문제를 스크립트까지 들고가는거는 너무 복잡한 문제이다.

그럼 단순히 생각하면 백그라운드 이미지 말고 우리가 흔히 쓰는 image 태그를 이용해서 위치를 잡으면 될거같다.

그럴때 우리가 통상적으로 생각하는 방법이 아래와 같은 방법일 것이다.

.grp_image {
  width: 100%;
  height: 600px;
  overflow: hidden; /* 부모 영역을 넘치는 부분 숨기기 */
  position: relative; /* 자식인 img의 기준점 */
}

.grp_image img {
  position: absolute;
  top: 50%; /* 세로 중앙 정렬 */
  left: 50%; /* 가로 중앙 정렬 */
  transform: translate(-50%, -50%); /* 중앙 정렬 보정 */
  max-width: 100%; /* 비율 유지하면서 가로 맞추기 */
  max-height: 100%; /* 비율 유지하면서 세로 맞추기 */
}Copy

이것도 나쁘진 않은 방법이긴 하다.

무엇보다도 img 태그를 직접 노출시키는 방식이므로 아래와 같이 img 태그에 lazy loading 을 적용 시킬 수 있다.

<div class="grp_image">
    <img src="https://cdn.erulabo.com/editor/dmGYinXdFvdn7HGV0APqFohtFDv39Y9maLPA170d_optimized.webp" loading="lazy">
</div>Copy

근데 스타일 코드만봐도 꽤나 복잡해보인다는걸 알수있다.

그래서 뭐 요즘에는 이런걸 어떻게 적용하나 싶어서 찾아봤더니 아래와 같은 방법이 존재한다고한다.

Object 제어 스타일

.image-container {
  width: 100%; /* 원하는 박스 크기 */
  height: 600px;
  overflow: hidden; /* 이미지가 넘치는 부분 숨기기 */
  position: relative;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지 비율 유지하며 박스 채우기 */
  object-position: center; /* (선택 사항) 이미지의 중심을 기준으로 */
}Copy