[HTML, CSS] 반응형 이미지(picture, object-fit)

picture

<picture>은 HTML5에서 추가된 요소 중 하나다. 미디어 쿼리를 이용해서 다양한 디스플레이에서 특정 이미지를 변경할 수 있기 때문에 반응형 웹페이지에서 쓰일 수 있다. 여러개의 source 요소와 하나의 img 요소를 사용할 수 있다.

<picture>
  <!-- 480px 이하 디바이스에서 노출되는 이미지 -->
  <source media="(max-width: 480px)" srcset="images/hero_mobile.png"> 
  <!-- 481px 이상 1025px 이하 디바이스에서 노출되는 이미지 -->
  <source media="(min-width: 481px) and (max-width: 1025px)" srcset="images/hero_tablet.png"> 
  
  <!-- picture을 지원하지 않거나 앞서 선언한 속성 이외 디바이스에서 노출되는 이미지 -->
  <img src="images/hero.png" alt="">  
</picture>

위 소스에서 images 폴더 안엔 총 3장의 png가 있고 source 속성에서 노출될 디바이스 크기를 미디어 쿼리로 선언하고 srcset으로 출력될 이미지 경로를 작성해줬다. 참고로 source는 개수가  여러개 추가될 수 있지만 Img는 한장만 추가할 수 있다.

단순히 반응형 이미지 뿐만 아니라 파일 형식 지원이 한정적인 avif, webp 확장자는 대체 이미지를 제공할 수도 있다.

<picture>
  <source srcset="images/hero.webp" type="image/webp"> 
  <img src="images/hero.png" alt="">  
</picture>

webp 확장자 이미지를 png로 변경하는 법: https://m.post.naver.com/viewer/postView.nhn?volumeNo=9688816&memberNo=1834

 

object-fit, background-size

object-fit은 CSS에서 <img>와 <video>의 크기를 디바이스 크기가 변할 때 어떤 식으로 조절이 될 지 결정하는 속성이다.

background-size도 object-fit과 비슷하지만 외부 객체 요소와 달리 background의 url 경로 이미지를 조정할 수 있는 속성이다. object-fit의 속성값을 일부 가져가지만 px 단위 등으로 크기를 조정할 수 있는 성향이 훨씬 더 강하다.

속성값

• contain
• cover 
• fill
• none
• scale-down

object-fit은 위의 속성값을 전부 가져가지만 background-size는 contain과 cover만 가져간다. 

contain

가로세로 비율은 유지한 채 요소가 박스 안에 들어가게 된다. 박스와 요소의 비율이 동일하지 않으면 박스에 공백이 생기게 된다. 

<div class="imgbox" style="width: 300px; height: 300px;">
  <img src="images/hero.png" alt="" style="width: 100%; height: 100%; object-fit: contain;">
</div>

cover

가로세로 비율은 유지한 채 요소가 박스를 가득 채우게 된다. 박스와 요소의 비율이 동일하지 않으면 요소의 일부가 잘리게 된다.

<div class="imgbox" style="width: 300px; height: 300px;">
  <img src="images/hero.png" alt="" style="width: 100%; height: 100%; object-fit: cover;">
</div>

fill

가로세로 비율을 유지하지 않고 요소가 박스를 가득 채우게 된다. 

<div class="imgbox" style="width: 300px; height: 300px;">
  <img src="images/hero.png" alt="" style="width: 100%; height: 100%; object-fit: fill;">
</div>

none

object-fit 요소를 사용하지 않는다.

scale-down

none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택한다.