Maison >interface Web >tutoriel CSS >Comment recadrer et centrer automatiquement une image arbitraire dans un carré spécifié ?

Comment recadrer et centrer automatiquement une image arbitraire dans un carré spécifié ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-04 21:33:14398parcourir

How to Auto-Crop and Center an Arbitrary Image within a Specified Square?

Recadrage automatique et centrage d'une image arbitraire

Étant donné une image de dimensions inconnues, la tâche de recadrer un carré à partir de son centre et de l'afficher dans un carré spécifié nécessite une solution dynamique.

Utiliser des images d'arrière-plan

Une approche consiste en utilisant une image d'arrière-plan positionnée au centre d'un élément dimensionné aux dimensions de recadrage souhaitées.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div>

Cette méthode exploite la capacité de CSS à redimensionner et positionner automatiquement l'image d'arrière-plan, garantissant qu'elle reste centrée et recadrée dans les dimensions spécifiées , quelle que soit la taille de l'image originale.

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!

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