Comment puis-je préserver le rapport hauteur/largeur de l'image à l'aide de Flexbox ?

Application des proportions de l'image avec Flexbox : maintien des proportions

Dans une disposition flexbox, les images sont souvent redimensionnées pour remplir la largeur de leur conteneur. Bien que ce comportement soit souhaitable dans de nombreux cas, il peut ne pas convenir lorsque vous souhaitez conserver les proportions d'origine des images.

Considérez le code HTML et CSS suivant :

<div class="slider">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

Ce code crée un curseur avec trois images qui s'étirent ou se rétrécissent pour remplir le conteneur horizontalement.

Solution 1 : Utiliser object-fit

Une façon de conserver les proportions de l'image consiste à utiliser la propriété CSS object-fit. En définissant object-fit: contain, vous demandez au navigateur de redimensionner l'image tout en préservant ses proportions.

.slider img {
    object-fit: contain;
}

Cette solution est simple et fonctionne bien dans la plupart des cas.

Solution 2 : règles spécifiques à Flex

Une autre approche consiste à utiliser des règles spécifiques à Flex. En définissant align-self: center et flex: 0 0 auto, vous forcez les images à se centrer verticalement et à se redimensionner proportionnellement dans leur conteneur.

.slider img {
    align-self: center;
    flex: 0 0 auto;
}

Cette méthode vous donne plus de contrôle sur le positionnement de l'image et est mieux adaptée. pour des exigences de mise en page spécifiques.

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!