Comment puis-je remplir proportionnellement une division avec une image tout en conservant les proportions ?

Remplir un div avec une image proportionnellement

Dans ce fil de discussion, un utilisateur cherche à remplir un div avec une image tout en conservant les proportions , quelle que soit l’orientation de l’image. Le div a un débordement masqué, ce qui permet un recadrage potentiel de l'image.

Pour résoudre ce problème, il est recommandé de supprimer les attributs de largeur et de hauteur de l'image afin de préserver son rapport hauteur/largeur naturel. Flexbox peut ensuite être utilisé pour centrer l'image dans le div.

Voici un extrait de code CSS pour y parvenir :

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

Et un exemple HTML correspondant :

<div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

Cette solution utilise flexbox pour centrer l'image et garantir qu'elle remplit le div, en préservant ses proportions.

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!