Comment puis-je conserver les proportions de l'image lors du redimensionnement avec CSS ?

Préserver les proportions de l'image lors du dimensionnement à l'aide de CSS : un guide complet

Dans le domaine du développement Web, il est souvent nécessaire de redimensionner les images pour les adapter diverses exigences d'affichage. Cependant, il est crucial de conserver les proportions de l'image pour éviter tout étirement ou distorsion indésirable. Pour y parvenir, CSS propose une solution élégante.

Object-Fit : la clé du maintien des proportions

La propriété object-fit contrôle la manière dont le contenu d'un élément remplacé , comme une image ou une vidéo, doit être redimensionné pour s'adapter à son conteneur. En utilisant cette propriété, nous pouvons spécifier comment une image doit être dimensionnée tout en préservant ses proportions d'origine.

Préserver les proportions lors du remplissage d'un élément

Pour remplir un élément avec une image tout en conservant les proportions, utilisez la valeur "cover" pour la propriété d'ajustement de l'objet. Cela indique au navigateur de redimensionner l'image pour remplir complètement l'élément, tout en recadrant tout contenu excédentaire sur les bords pour garantir le maintien des proportions.

Par exemple :

.cover {
  object-fit: cover;
  width: 150px;
  height: 100px;
}

<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/2OrtT.jpg" class="lazy" alt="Comment puis-je conserver les proportions de l'image lors du redimensionnement avec CSS ?" >

Démonstration de code

Dans l'exemple ci-dessus, la classe cover utilise la propriété object-fit: cover pour garantir que l'image est mise à l'échelle pour remplir le élément d'une largeur de 150px et d'une hauteur de 100px. Malgré les dimensions d'origine de l'image (largeur 242 px, hauteur 363 px), elle est mise à l'échelle et recadrée pour conserver son rapport hauteur/largeur dans la taille d'élément spécifiée.

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!