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中文網其他相關文章！