Une brève discussion sur l'attribut srcset dans la balise HTML img

Quand j'ai regardé le code de mes prédécesseurs aujourd'hui, j'ai découvert que la balise img avait un attribut srcset inconnu, comme suit :

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

En le lisant, j'ai a appris que cet attribut est utilisé pour : utiliser le src le plus approprié pour correspondre à différents écrans (écrans haute résolution et écrans basse résolution tels que Retina ; grands écrans et petits écrans). Utilisez comme suit :

<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 et 3x représentent la densité de pixels de l'écran cible ; 400w et 600w représentent la limite de largeur du navigateur cible. Par exemple, lorsque la largeur du navigateur est de 550w, elle correspond au src de. 600w.

Obtenez le rapport de pixels via window.devicePixelRatio

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!