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

Automatisation du recadrage et du centrage des images

Lorsque vous travaillez avec des images de différentes tailles, la nécessité de les recadrer et de les centrer automatiquement dans un la dimension carrée apparaît. Contrairement aux approches précédentes qui s'appuient sur des tailles d'image connues, une solution plus robuste est nécessaire.

Une approche efficace consiste à utiliser des images d'arrière-plan. En centrant l'image dans un élément dimensionné aux dimensions de recadrage souhaitées, nous pouvons obtenir le résultat souhaité.

Exemple de mise en œuvre

Cet exemple de base illustre l'approche :

 largeur : 100px ;<br> hauteur : 100px;<br> position d'arrière-plan : centre centre ;<br> répétition d'arrière-plan : pas de répétition;<br>}

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">>

Copier après la connexion

< /div>

Dans cet exemple, le La classe ".center-cropped" définit un élément d'une dimension carrée de 100 pixels. L’URL de l’image d’arrière-plan pointe vers une image d’espace réservé de plus grande taille. Le style garantit que l'image est centrée dans l'élément, ce qui donne une image carrée recadrée et centrée.

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!