HTML img 태그의 srcset 속성에 대한 간략한 설명

오늘 선배님들의 코드를 보다가 img 태그에 다음과 같이 생소한 srcset 속성이 있는 것을 발견했습니다.

<img class="Avatar" src="https://pic3.zhimg.com/8622a8eea_s.jpg" srcset="https://pic3.zhimg.com/8622a8eea_xs.jpg 2x" alt="测试用户1">

읽어보니 이 속성이 다양한 화면에 맞게 사용된다는 것을 알게 되었습니다( Retina와 같은 가장 적합한 src를 갖춘 고해상도 화면 및 저해상도 화면; 다음과 같이 사용하세요.

<img src="source.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x">

<img src="source.jpg" width="100%"
  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

2x와 3x는 대상 화면의 픽셀 밀도를 나타냅니다. 400w와 600w는 대상 브라우저의 너비 제한을 나타냅니다. 예를 들어 브라우저 너비가 550w인 경우 src 600w와 일치합니다.

픽셀 비율은 window.devicePixelRatio

을 통해 알아보세요. 프로그래밍 관련 지식을 더 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 HTML img 태그의 srcset 속성에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!