반응형 이미지는 종종 srcset 속성을 사용하여 구현됩니다. srcset 속성은 쉼표로 구분된 이미지 파일 이름과 해당 너비 또는 밀도 설명어를 나열한 목록입니다. 레이아웃 변경을 방지하려면 srcset을 사용하는 <img> 및 <source> 태그에 width 및 height 속성을 설정합니다.
밀도 설명자를 사용하는 반응형 이미지의 경우:
src와srcset에 나열된 모든 이미지의 가로세로 비율이 동일해야 합니다.width및height속성을1x이미지의 크기와 일치하도록 설정합니다.src속성은1x이미지를 참조해야 합니다.
너비 설명자를 사용하는 반응형 이미지의 경우:
src및srcset에 나열된 모든 이미지는 가로세로 비율이 동일해야 합니다.width및height속성을 대체 이미지의 크기와 일치하도록 설정합니다.- 필요에 따라 이미지 스타일 지정 조정: CSS 스타일 지정이 없는 경우 너비 설명어를 사용하는 반응형 이미지에
width및height를 설정하면srcset에 나열된 이미지의 크기가 다른 경우에도 이미지가 항상 동일한 크기로 렌더링됩니다. 이 동작은 원치 않는 동작일 수 있습니다. 이미지 스타일 지정에width: 100%; height: auto;또는width: 100vw; height: auto;를 추가하면 원하는 시각적 모양을 얻을 수 있습니다.
<picture> 태그의 경우:
- 모든
<source>태그에width및height속성 설정:width및height에 적절한 값은<source>태그가srcset를 사용하는 방식에 따라 달라집니다.srcset작업에 관한 자세한 내용은 위 내용을 참고하세요. - 이미지 스타일 지정 조정: 이미지 스타일을 조정해야 하는 경우
<source>태그에 스타일을 추가해도 아무 효과가 없습니다.<source>태그는 빈 요소입니다. 대신 상응하는<img>태그의 스타일을 지정해야 합니다. <img>태그에width및height속성 설정: 이러한 값은 대체 이미지의 고유 크기와 일치해야 합니다.
HTML
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>