Comment puis-je faire en sorte qu'une image remplisse une division tout en conservant son rapport hauteur/largeur à l'aide de Flexbox ?

Image proportionnelle remplissant un div

Votre objectif est de remplir un div avec une image tout en préservant les proportions de l'image. Contrairement à un fil de discussion précédent, vous souhaitez que l'image remplisse toujours le div, quelle que soit l'orientation.

Solution : Flexbox

Pour y parvenir, nous pouvons exploiter CSS flexbox :

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

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

Explication :

• Définissez le conteneur div pour afficher : fléchir et centrer son contenu.
• Spécifiez flex-shrink : 0 sur l'image pour l'empêcher de rétrécir.
• Définissez la largeur minimale : 100 % et la hauteur min : 100 % pour garantir que l'image remplisse le div.

Exemple :

<div class="container">
  <img src="some-image.jpg" alt="Could be portrait or landscape">
</div>

Le résultat est une image qui remplit le div tout en conservant son rapport hauteur/largeur. Qu'elle soit portrait ou paysage, l'image occupera tout l'espace.

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!