Comment puis-je centrer et recadrer automatiquement une image à une taille de carré spécifique à l'aide de CSS ?

Centrage et recadrage automatique d'une image

Souvent, il est nécessaire de recadrer et de centrer une image pour l'adapter à une dimension carrée spécifique sans avoir à connaissance préalable de la taille de l'image. Ceci peut être réalisé en utilisant la propriété CSS background-image.

Centrer une image avec un recadrage dynamique

Pour centrer et recadrer une image de manière dynamique, suivez ces étapes :

1. Définissez un élément HTML avec une largeur et une hauteur spécifiques, représentant les dimensions recadrées souhaitées.
2. Utilisez la propriété background-image pour définir l'URL de l'image.
3. Alignez l'image au centre en utilisant background-position: center center;.
4. Empêchez l'image de se répéter en définissant background-repeat: no-repeat;.

Exemple Code :

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

<div class="center-cropped">

En utilisant cette technique, l'image sera automatiquement centrée et recadrée dans les dimensions définies, quelle que soit sa taille d'origine.

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!