HTML 그림 요소 반응형 이미지

오늘 우리는 HTML Picture element를 살펴볼 것입니다. 기본 반응형 이미지를 지원하는 데 사용할 수 있습니다.

따라서 작동 방식은 일반 img 태그를 picture 요소 안에 래핑하고 srcset 이미지를 추가하는 것입니다.

그런 다음 미디어 쿼리에서 표시되는 이미지를 정의합니다.

HTML 그림 요소

좋아, 시작하자!

이 예에서는 극단적인 경우를 사용합니다. 일반적으로 원본 이미지의 수정된 버전을 더 작은 크기나 다른 방향으로 사용합니다.

<picture>
  <source
    media="(min-width: 650px)"
    srcset="https://images.unsplash.com/photo-1589965716319-4a041b58fa8a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"
  />
  <source
    media="(min-width: 465px)"
    srcset="https://images.unsplash.com/photo-1534235261404-7625cd79bdb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
  />
  <img
    src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=939&q=80"
    alt="A amazing corgi dog"
  />
</picture>

이제 다음을 볼 수 있습니다.

650px 이상 화면 - 산 위의 코기

465~650픽셀 사이의 화면 - 계단 위의 코기

465보다 작은 화면 - 강아지 코기!

놀랍지 않은가!

To make this function even better, add loading="lazy".

Codepen에서 이러한 Corgi를 자유롭게 볼 수 있습니다.

브라우저 지원

매우 멋진 기능이지만 예상대로 IE 및 Opera mini에서 지원되지 않습니다.
하지만! 기본 이미지로 대체됩니다! 따라서 그것을 사용하는 데 실질적인 반대가 없습니다!

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나