Comment faire une image réactive dans HTML?

La méthode principale d'implémentation d'images réactives dans HTML comprend les étapes suivantes: 1. Utilisez la largeur maximale: 100% pour adapter l'image au conteneur pour vous assurer que l'image est mise à l'échelle à l'échelle et ne déborde pas; 2. Utilisez les attributs SRCSET et tailles pour permettre au navigateur de charger des images de la taille appropriée en fonction de la largeur de l'écran, améliorant l'efficacité de chargement; 3. Faites attention à la taille et au format d'origine de l'image pour éviter que les images excessivement grandes soient affichées et utilisez des formats modernes tels que WebP pour optimiser les performances de chargement; 4. Résoudre des problèmes communs dans la disposition, tels que la taille des conteneurs non définis, la hauteur non adaptative et l'affichage d'écran haute résolution floue, les tailles claires doivent être définies et SRCSET doit être utilisé avec des images à haute définition. Ces pratiques garantissent conjointement le bon affichage et les performances des images sur divers appareils.

Le cœur de l'implémentation d'images réactives dans HTML est de permettre aux images de redimensionner et d'affiner automatiquement leur taille en fonction de la taille de l'écran. Autrement dit, il s'agit d'utiliser CSS pour contrôler le comportement de taille de l'image, et en même temps combiner les attributs de balises img de HTML pour optimiser l'effet d'affichage.

1. Utilisez max-width: 100% pour faire de l'image un conteneur adaptatif

Il s'agit de l'étape la plus fondamentale et la plus critique. En définissant max-width: 100% pour l'image, il peut être automatiquement mis à l'échelle sur différents appareils sans dépasser sa largeur de conteneur.

 img {
  largeur maximale: 100%;
  Hauteur: Auto;
}

Après ce paramètre, quelle que soit la largeur de l'image dans une boîte, elle peut maintenir l'échelle et éviter la déformation ou le débordement.

2. Utilisez des attributs srcset et sizes pour améliorer l'efficacité de chargement

Si vous comptez uniquement sur CSS, cela peut faire charger de grands appareils d'écran pour charger de grandes images, gaspillant le trafic. À l'heure actuelle, vous pouvez utiliser les attributs HTML srcset et sizes :

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175225199725051.jpeg"  class="lazy"  
  src = "small.jpg" 
  srcset = "small.jpg 480w, moyen.jpg 800w, grand.jpg 1200w"
  tailles = "(max-large: 600px) 480px, (max-largeur: 1000px) 800px, 1200px"
  alt = "Exemple d&#39;image">

• srcset : indique au navigateur quelles photos sont disponibles et leur largeur.
• sizes : Définissez la largeur de l'image sous différentes largeurs d'écran.

De cette façon, le navigateur peut sélectionner la taille la plus appropriée de l'image à charger en fonction de l'écran actuel, ce qui garantit non seulement la clarté mais enregistre également la bande passante.

3. Faites attention à la taille et au format d'origine de l'image

Parfois, même si le style réactif est écrit, l'image a toujours l'air floue ou se charge lentement. Le problème peut résider dans l'image elle-même:

• N'utilisez pas d'images trop grandes pour réduire l'écran . Par exemple, si vous utilisez des images 5000x3000 pour les afficher comme 300x200, le temps de chargement deviendra plus long.
• En utilisant des formats modernes tels que WebP , il est plus petit et plus clair que JPEG / PNG.
• Pour compresser les images à l'avance , vous pouvez utiliser des outils tels que TinYPNG, ImageOptim, etc.

Bien que ces détails soient discrets, ils ont un grand impact sur les performances et l'expérience.

4. Des questions fréquemment posées sur les images réactives dans la mise en page

Parfois, vous constaterez que les images ne sont pas alignées ou déformées sur certains appareils, ce qui est généralement causé par les raisons suivantes:

• Le conteneur n'a pas de largeur ou de hauteur claire
• Oublié de régler height: auto entraîne la proportionnalité de l'image en panne
• Aucun problème de clarté sous les écrans haute résolution (rétine) n'a été considéré

La solution est également très simple:

• Les conteneurs d'image doivent être clairement dimensionnés
• Garder height: auto évite l'étirement de la déformation
• Pour les écrans à haute définition, des images de résolution plus élevée peuvent être utilisées pour correspondre srcset

Fondamentalement, ce sont les méthodes. Les images réactives ne sont pas compliquées, mais elles sont faciles à ignorer certains détails, en particulier l'optimisation de la charge et le traitement du format d'image. La prise en considération de tous ces points permettra aux images de mieux fonctionner sur divers appareils.

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!