Comment puis-je réaliser un redimensionnement dynamique d'image avec Pure CSS ?

Redimensionnement dynamique des images avec CSS

La conception réactive nécessite souvent que les images ajustent leur taille de manière dynamique à mesure que la fenêtre d'affichage du navigateur change. Bien que le code fourni semble prometteur, il rencontre des problèmes dans certains navigateurs, notamment dans Chrome et Safari.

Pour surmonter ces problèmes, une solution CSS pure est possible sans avoir besoin de JavaScript. Voici comment obtenir un redimensionnement dynamique des images :

Tout d'abord, assurez-vous que les images ont une largeur maximale de 100 %. Cela leur permet de réduire leur taille lorsque la fenêtre du navigateur se rétrécit, sans dépasser leur largeur d'origine. De plus, définissez la hauteur sur auto pour permettre aux images de s'adapter à la hauteur de leur contenu.

Pour la compatibilité avec IE8, incluez la propriété width : auto9. Cela garantit que les images avec un rapport hauteur/largeur plus étroit ne sont pas trop étirées dans IE8.

Si vous souhaitez une largeur maximale fixe pour les images, placez-les dans un conteneur et spécifiez sa largeur maximale. Par exemple :

<div>

Dans l'ensemble, l'utilisation de max-width:100%, height:auto et width: auto9 (pour IE8) offre une solution à toute épreuve pour le redimensionnement dynamique des images avec CSS. Cette méthode fonctionne de manière transparente dans Chrome, Firefox et IE.

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!