Comment préserver le rapport hauteur/largeur de l'image dans CSS Flexbox ?

Conserver les proportions de l'image dans Flexbox

Conserver les proportions de l'image lors du redimensionnement de sa hauteur peut être un défi dans le modèle CSS flexbox. Cependant, il existe plusieurs méthodes disponibles pour y parvenir.

Propriété d'ajustement d'objet

Une approche consiste à utiliser la propriété d'ajustement d'objet sur l'image. En définissant object-fit: contain, l'image sera mise à l'échelle pour s'adapter à son conteneur cible tout en préservant ses proportions.

Règles spécifiques à Flex

Une autre option est pour utiliser des règles spécifiques à flex :

• Définissez align-self: center pour centrer verticalement l'image dans son parent conteneur.
• Définissez flex : 0 0 auto pour rendre la largeur et la hauteur de l'image flexibles, lui permettant de se rétrécir ou de s'agrandir selon les besoins.

Exemple

Voici un exemple qui démontre les deux méthodes :

<div class="slider">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
</div>

.slider {
    display: flex;
    height: 200px;
}

.slider img {
    margin: 0 5px;
    object-fit: contain;
}

/* Alternative Flex-Specific Rules */
.slider img {
    align-self: center;
    flex: 0 0 auto;
}

Cette méthode devrait préserve efficacement les proportions de l'image, même lors du réglage de leur hauteur.

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!