Comment faire en sorte que les images remplissent proportionnellement les divisions en CSS ?

Comment afficher des images proportionnelles dans des divisions remplies

En CSS, obtenir un ajustement parfait pour les images dans une div peut être difficile, surtout si vous souhaitez conserver leur rapport hauteur/largeur. Voici une solution concise pour remplir un div avec une image tout en conservant la proportionnalité :

Utilisation de l'ajustement d'objet

La plupart des navigateurs modernes prennent en charge la propriété d'ajustement d'objet, vous permettant de contrôler comment les images sont affichées dans leurs conteneurs. Pour ce scénario, vous pouvez utiliser le CSS suivant :

.image-container {
  overflow: hidden;
}

.image-container img {
  object-fit: contain;
}

Object-fit: contain garantit que l'image remplit le conteneur tout en conservant ses proportions d'origine. Cela empêche également que l'image soit recadrée ou déformée.

Utilisation de Flexbox

Une approche alternative consiste à utiliser Flexbox. Cette technique vous permet de centrer et de dimensionner de manière flexible l'image dans le div, obtenant ainsi l'effet souhaité :

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image-container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

Dans ce scénario, l'image remplira toujours la hauteur ou la largeur disponible du div tout en conservant son rapport hauteur/largeur.

Exemple d'implémentation

Pour implémenter cette solution, appliquez simplement le CSS approprié au div contenant le image :

<div class="image-container">
  <img src="my-image.jpg">
</div>

Remarque : Assurez-vous que la propriété de débordement est définie sur cachée sur le div pour empêcher l'image de déborder en dehors de ses limites.

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!