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 中国語 Web サイトの他の関連記事を参照してください。