在 Safari 上使用 CSS 調整圖像大小，但不適用於 Google Chrome

Question

我一直在嘗試使用 CSS（下面的代碼）對照片進行方形處理。 出於某種原因，它不適用於 Google Chrome（但它適用於 Safari）。 有誰知道如何解決這一問題？

CSS代碼：

img {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

Safari 上的結果：

在谷歌瀏覽器上的結果：

Answer 1

您可以將這些圖像放在像article這樣的父標簽article ，然后將width和height應用於您的父標簽（文章）。 然后將圖像寬度和高度設置為 100%，使圖像完全適合父（文章）。

這樣：如您所見，照片寬度為 500 像素，但父級不讓它增長並占用更多空間。

https://picsum.photos/500寬度：500px。

 .container { display: flex; width: 400px; height: 100px; } article { width: 100px; height: 100px; } article img { width: 100%; height: 100%; border: 1px solid red }

 <section class="container"> <article> <img src="https://picsum.photos/500"> </article> <article> <img src="https://picsum.photos/500"> </article> <article> <img src="https://picsum.photos/500"> </article> <article> <img src="https://picsum.photos/500"> </article> </section>

Answer 2

無論您的圖像比例是16:9還是1 。

 .container { display: flex; width: 400px; height: 100px; } .container article { width: 100px; height: 100px; } .container article img { width: 100%; height: 100%; border: 1px solid red }

 <p> The width = 200 px and the height: 500 px</p> <section class="container"> <article> <img src="https://picsum.photos/200/500"> </article> <article> <img src="https://picsum.photos/200/500"> </article> <article> <img src="https://picsum.photos/200/500"> </article> <article> <img src="https://picsum.photos/200/500"> </article> </section><br> <p>The same image you can see</p><br> <img src="https://picsum.photos/200/500">

Answer 3

這不是問題的答案，因為我看不出存在問題，但我認為提供一個片段可能很有用，您可以在您的 Chrome 版本上嘗試查看是否仍然遇到問題.

此代碼段拍攝圖像，其中兩張是方形的，一張是縱向的，一張是橫向的。 如您所見，它們在頂部和底部或側面被適當裁剪，以使其適合並覆蓋 300x300 方塊。 沒有失真。

 img { width: 300px; height: 300px; object-fit: cover; }

 <img src="https://picsum.photos/id/1049/1024/768"/> <img src="https://picsum.photos/id/1049/768/768"/> <img src="https://picsum.photos/id/1049/768/1024"/> <img src="https://picsum.photos/id/1049/1024/1024"/>