在 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"/>