Comment puis-je remplir proportionnellement une division avec une image à l'aide de Flexbox ?

Remplir un Div avec une image proportionnellement

Dans la quête de création de conceptions Web réactives, un défi courant se pose en remplissant un élément div avec une image tout en conservant ses proportions. Lorsque l'image varie en orientation entre portrait et paysage, il devient difficile de la redimensionner de manière transparente tout en respectant ses proportions d'origine.

Pour résoudre ce problème, CSS propose une solution utilisant flexbox. En utilisant CSS flexbox, vous pouvez obtenir le résultat souhaité avec quelques lignes de code.

Flexbox à la rescousse

Flexbox est un module de mise en page CSS qui fournit des des moyens efficaces de distribuer et de gérer l’espace au sein d’un élément conteneur. Dans ce cas, il peut être utilisé pour garantir que l'image remplit toujours le conteneur div, quel que soit son rapport hauteur/largeur.

Implémentation

Considérez le balisage HTML suivant :

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

Pour obtenir le comportement souhaité, appliquez les styles CSS suivants au elements :

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

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

Explication

• .container:

  • display: flex : Active la flexbox sur le conteneur div.
  • justify-content: center; align-items: center; : centre l'image dans le div.
  • overflow: Hidden : masque toute partie de l'image qui déborde du conteneur.

• .container img:

  • flex-shrink: 0; : empêche l'image de rétrécir lorsque le conteneur redimensionne.
  • largeur min : 100 % ; min-height : 100 % ; : garantit que l'image s'agrandit toujours au moins jusqu'à la taille du conteneur.

Résultat

Avec ces styles CSS implémentés, l'image remplira automatiquement le conteneur div tout en conservant son rapport hauteur/largeur. Si l'image est en portrait, sa largeur sera de 100 %, et sa hauteur sera ajustée proportionnellement. De même, si l'image est en paysage, sa hauteur sera de 100 % et sa largeur s'ajustera en conséquence.

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!