CSS 如何使所有图像适合 100x100 像素的正方形？

在不同尺寸的图像中实现一致性

设想建造一面用产品照片装饰的图像墙。当这些图像有多种尺寸时，挑战就出现了。如何利用 CSS 赋予它们和谐的外观，让每张图像都装饰在 100 x 100 像素的画布上？

考虑设想一个 div，其高度和宽度都装饰有所需的 100 像素尺寸。问题仍然是：如何巧妙地利用这个 div 来容纳不同比例的图像？

当前解决方案（最适合现代浏览器）

<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;

登录后复制

}

<img src="http://i.imgur.com /37w80TG.jpg"><br><img  src="/static/imghw/default1.png"  data-src="http://i.imgur.com/B1MCOtx.jpg"  class="lazy">