[Modern CSS] 3탄 CSS만으로 반응형 풀사이즈 이미지 크기 만들기

Modern CSS 3탄 입니다!

먼저 이미지가 배경 이미지로 스타일 속성에 삽입되는 HTML입니다.

일반적으로 aria-label은 일반 img 태그에 표시되는 alt 속성을 대신하므로 좋습니다.

background-size:cover

<article class="card">
  <div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/320/240/tech)"></div>
  <div class="card__content">
    <h3>Whizzbang Widget SuperDeluxe</h3>
    <p>
      Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
      biscuit marzipan. Macaroon pie sesame snaps jelly-o.
    </p>
    <a href="#" class="button">Add to Cart</a>
  </div>
</article>

.card__img {
  background-size: cover;
  background-position: center;
  // 16:9 ratio
  padding-bottom: 62.5%;
}

object-fit:cover

이 스타일은 img 태그에 직접 적용되므로 카드 HTML을 다음과 같이 업데이트하여 aria-label을 alt로 바꿉니다.

<article class="card">
  <img class="card__img" alt="Preview of Whizzbang Widget" src="https://placeimg.com/320/240/tech"/>
  <div class="card__content">
    <h3>Whizzbang Widget SuperDeluxe</h3>
    <p>
      Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
      biscuit marzipan. Macaroon pie sesame snaps jelly-o.
    </p>
    <a href="#" class="button">Add to Cart</a>
  </div>
</article>

.card__img {
  object-fit: cover;
  height: 30vh;
}

높이를 제한하고 그 비율을 기준으로 항상 fit 하도록 설정합니다.

 

하위 브라우저를 지원해야 하는 경우 polyfill을 사용해야 하고 각각의 장점들을 살려서 유기적으로 적용하시면 됩니다.

 

background-size의 경우 : 

• 추가 콘텐츠를 담을 것으로 예상되는 컨테이너에 적용 (예 : 웹 사이트 헤더 배경)
• img 요소에서 사용할 수없는 유사 요소를 통해 추가 효과 스타일을 적용하기 위해
• 고유한 이미지의 역할이 아닐 경우

object-fit의 경우 : 

• 이미지에서 제공하는 모든 의미를 유지하려면(SEO 재고) 표준 이미지를 사용하는 것이 컨텍스트에 가장 적합합니다.