Comment puis-je redimensionner et recadrer des images à des dimensions spécifiques en utilisant uniquement CSS ?

Affichage des images redimensionnées et recadrées avec CSS

Exigence : Afficher une image à partir d'une URL avec une largeur et une hauteur spécifiées , quel que soit son rapport hauteur/largeur d'origine. L'image doit être redimensionnée puis recadrée pour l'adapter aux dimensions souhaitées.

Solution : Combinez les propriétés img et background-image :

• Utilisez img pour redimensionner l'image tout en conservant son rapport hauteur/largeur.
• Utilisez background-image pour recadrer l'image redimensionnée au format souhaité taille.

Exemple :

Considérons une image de dimensions 800x600 pixels que nous souhaitons afficher en 200x100 pixels.

HTML :

<div class="crop">
    <img src="https://i.sstatic.net/wPh0S.jpg" alt="Donald Duck">
</div>

CSS :

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

Explication :

• La classe .crop définit le conteneur de l'image, avec son largeur et hauteur.
• L'élément img est utilisé pour redimensionner l'image tout en préservant ses proportions. La largeur et la hauteur sont définies pour conserver le rapport de taille d'origine.
• Les marges négatives sont appliquées à l'élément img pour le centrer et le recadrer dans le conteneur .crop. Les marges sont calculées en fonction de la taille réelle de l'image originale (400 px x 300 px) et de la taille d'affichage souhaitée (200 px x 100 px).

Cette approche vous permet de redimensionner et de recadrer les images de manière dynamique, garantissant ils sont affichés dans la taille et le rapport hauteur/largeur souhaités sur différents appareils.

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!