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

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

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

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

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

<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?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 如何使所有图像适合 100x100 像素的正方形？" ><br><img  src="/static/imghwm/default1.png" data-src="http://i.imgur.com/B1MCOtx.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 如何使所有图像适合 100x100 像素的正方形？" >

这个现代解决方案利用“object-fit”CSS 属性可以在指定的尺寸内调整图像。这种方法可确保图像按比例缩放并在分配的空间内居中，使它们具有视觉吸引力且一致。

以上是CSS 如何使所有图像适合 100x100 像素的正方形？的详细内容。更多信息请关注PHP中文网其他相关文章！