반응형에 따라 다른 이미지를 불러오는 방법

큰 화면에서 잘 보이는 단체 사진의 얼굴이 작은 화면에서는 안 보일 수도 있다.

이밖에도 화면에 따라서 다른 이미지를 보여줘야 할 때가 있다.

 

이런 때에는 아래와 같이 picture 엘리먼트를 이용한다.

 

<picture>
  <source media="(max-width: 500px)" srcset="cat-cropped.jpg" />
  <source media="(min-width: 501px)" srcset="cat.jpg" />
  <img src="cat.jpg" alt="웃는 고양이" />
</picture>