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)

< div class="snippet-code">

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">float: left;
width:  100px;
height: 100px;
object-fit: cover;

Copier après la connexion

}

<img src="http://i.imgur.com /37w80TG.jpg"><br><img src="http://i.imgur.com/B1MCOtx.jpg">