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

Afficher une image redimensionnée et recadrée avec CSS

Problème :

Vous souhaitez afficher une image provenant d'une URL à une largeur et une hauteur spécifiques, même si son rapport hauteur/largeur diffère des dimensions souhaitées. Le but est de redimensionner l'image tout en conservant son rapport d'origine, puis de la recadrer à la taille souhaitée.

Solution CSS :

Pour réaliser à la fois le redimensionnement et le recadrage, vous pouvez combiner les techniques suivantes :

• Redimensionnement : Utilisez la largeur et la hauteur de l'élément HTML img propriétés pour redimensionner l’image. Cela conservera les proportions de l'image d'origine.
• Recadrage : Créez un élément conteneur (par exemple, un div) avec les dimensions finales souhaitées. Définissez un débordement de masqué pour ce conteneur afin de recadrer toute image en excès.

Mise en œuvre :

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

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

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

Dans cet exemple :

• L'image sera redimensionnée à une largeur de 200px et une hauteur de 150px (avec rapport hauteur/largeur maintenu).
• La propriété margin est utilisée pour recadrer l'image en déplaçant sa position dans le conteneur.
• La propriété de débordement du conteneur est définie sur masquée pour garantir que seule la partie souhaitée de l'image s'affiche.

Résultat :

Cette combinaison permet d'afficher une image à un endroit précis taille tout en conservant son rapport hauteur/largeur d'origine et en le recadrant pour l'adapter aux dimensions souhaitées.

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!