웹용 반응형 이미지

최근에 나는 반응형 이미지에 대해 새로운 것을 배웠고 여기에서 공유하고 싶습니다.

모두 알고 있듯이 CSS 및 미디어 쿼리를 통해 반응형 이미지를 생성할 수 있지만 <picture> 요소를 사용하면 브라우저 뷰포트에 따라 여러 이미지를 표시할 수 있습니다.

CSS 사용

먼저 CSS를 사용한 반응형 이미지의 예를 보자.

  <img
    src="./src/desktop-img.png"
    alt="desktop"
    class="responsive"
    width="100%"
  />

CSS 속성을 지정하십시오.

  .responsive {
     height: auto;
  }

보시다시피 이미지는 화면 너비에 따라 조정되지만 이 솔루션은 이미지가 대형 화면용으로 설계되고 이미지에 텍스트가 포함된 경우 해당 정보가 손실될 수 있는 경우 작은 화면에서 그다지 편리하지 않습니다.

그림 요소 포함

<picture> 요소는 다양한 화면에 다양한 이미지를 사용할 수 있는 유연성을 제공합니다.<picture> 요소에는 하나 이상의 <source> 태그와 하나의 <img> 태그의 두 가지 태그가 포함되어 있습니다.<source> 태그에는 media 및 srcset 속성이 포함되어 있습니다. 브라우저는 현재 뷰포트 너비와 일치하는 미디어 쿼리를 확인하고 srcset 속성에 지정된 해당 이미지를 표시합니다.
그 예를 보자

<picture>
  <source media="(min-width:650px)" srcset="./src/desktop-img.png" />
  <source media="(min-width:465px)" srcset="./src/mobile-img.png" />
  <img src="./src/mobile-img.png" alt="desktop" style="width: 100%;" />
</picture>

여기서 너비가 650px 이상인 뷰포트용 desktop-img와 너비가 465px 이상인 뷰포트용 mobile-img를 보여주고 있습니다.
또한 <img> 태그에 기본 이미지를 지정했습니다. 미디어 쿼리 조건이 충족되지 않으면 이 이미지가 표시됩니다.


<picture> 태그here에 대해 자세히 읽을 수 있습니다.

읽어 주셔서 감사합니다!
부담없이 접속하세요