Comment puis-je redimensionner et recadrer des images à l'aide de HTML et CSS tout en conservant les proportions ?

Affichage d'une image redimensionnée et recadrée avec CSS

Introduction

Affichage d'images dans des dimensions spécifiques tout en conservant leur rapport hauteur/largeur peut être difficile. Cet article explique comment redimensionner et recadrer efficacement une image en utilisant une combinaison de techniques HTML et CSS.

Redimensionnement de l'image d'arrière-plan

La propriété background-image nous permet de spécifier une image comme arrière-plan d'un élément conteneur. En définissant la propriété background-size sur cover, l'image sera automatiquement redimensionnée pour s'adapter au conteneur tout en conservant son rapport.

Redimensionnement de l'image

Le La balise peut être utilisée pour intégrer une image dans une page Web. En spécifiant les attributs width et height, nous pouvons définir explicitement les dimensions souhaitées. Cependant, cela peut déformer l'image si le rapport hauteur/largeur d'origine n'est pas conservé.

Techniques de combinaison

Pour réaliser à la fois le redimensionnement et le recadrage, nous pouvons combiner les méthodes ci-dessus. Nous créons un élément conteneur avec la propriété background-image définie et la taille d'arrière-plan souhaitée. À l'intérieur du conteneur, nous plaçons un élément dont les dimensions sont inférieures à celles du conteneur. En ajustant soigneusement les propriétés de marge du fichier élément, nous pouvons effectivement recadrer l'image à la taille souhaitée tout en conservant son rapport hauteur/largeur d'origine.

Exemple

Le code suivant montre comment redimensionner et recadrer une image :

.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="Your image">
</div>

Dans cet exemple, l'élément conteneur (

) de dimensions 200px par 150px contient une image () de dimensions 400px par 300px. En définissant le débordement sur caché sur le conteneur, l'image est recadrée et en manipulant les propriétés de marge du champ élément, l'image résultante est efficacement redimensionnée et recadrée pour s'adapter au conteneur tout 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!

css html if while using Property this overflow margin background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn