Comment CSS peut-il adapter toutes les images à un carré de 100 x 100 pixels ?

Atteindre l'uniformité entre des images de dimensions variables

Envisagez de construire un mur d'images orné de photographies de produits. Le défi se pose lorsque ces images sont disponibles dans une myriade de tailles. Comment utiliser CSS pour leur donner une apparence harmonieuse, chaque image ornant un canevas de 100 x 100 pixels ?

Envisagez d'imaginer un div orné des dimensions souhaitées de 100 pixels pour la hauteur et la largeur. La question demeure : comment ce div peut-il être utilisé efficacement pour accueillir des images de proportions variables ?

Solution actuelle (optimale pour les navigateurs modernes)

<pre class="brush:php;toolbar:false">float: left;
width:  100px;
height: 100px;
object-fit: cover;

}

<img  src="/static/imghwm/default1.png" data-src="http://i.imgur.com/B1MCOtx.jpg" class="lazy" alt="Comment CSS peut-il adapter toutes les images à un carré de 100 x 100 pixels ?" ><br><img  src="/static/imghwm/default1.png" data-src="http://i.imgur.com/B1MCOtx.jpg" class="lazy" alt="Comment CSS peut-il adapter toutes les images à un carré de 100 x 100 pixels ?" >

Cette solution moderne exploite la propriété CSS "object-fit" pour affiner l'image dans les dimensions qui lui sont attribuées. Cette approche garantit que les images sont mises à l'échelle proportionnellement et centrées dans l'espace alloué, les rendant visuellement attrayantes et cohérentes.

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!