Eine kurze Diskussion über das srcset-Attribut im HTML-img-Tag

Als ich mir heute den Code meiner Vorgänger ansah, stellte ich fest, dass das img-Tag ein unbekanntes srcset-Attribut hat, wie folgt:

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

Beim Durchlesen habe ich erfahren, dass dieses Attribut verwendet wird, um verschiedene Bildschirme abzugleichen ( hochauflösende Bildschirme und Bildschirme mit niedriger Auflösung) mit der am besten geeigneten Quelle, z. B. Retina; Verwenden Sie Folgendes:

<img  src="/static/imghwm/default1.png"  data-src="source.jpg"  class="lazy"   srcset="source_2x.jpg 2x, source_3x.jpg 3x" alt="Eine kurze Diskussion über das srcset-Attribut im HTML-img-Tag" >

rrree

2x und 3x stellen die Pixeldichte des Zielbildschirms dar; 400 W und 600 W stellen die Breitenbeschränkung des Zielbrowsers dar. Wenn die Browserbreite beispielsweise 550 W beträgt, entspricht sie der Quelle von 600 W.

Ermitteln Sie das Pixelverhältnis durch window.devicePixelRatio

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über das srcset-Attribut im HTML-img-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!