반응형 이미지는 보통 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속성을 설정합니다. 이 속성에 적절한 값은<source>태그가srcset를 사용하는 방식에 따라 달라집니다. - 상응하는
<img>태그의 스타일을 지정하여 이미지를 조정합니다.<source>태그는 빈 요소이므로 스타일은 아무런 영향을 미치지 않습니다. <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>