css - Elementor Object Fit 在 Chrome 中无法正常工作

Question

我正在使用 Elementor 在 Wordpress 中创建一个网站，并且我有将 Object Fit 设置为 Cover 的图像。这在 Firefox 上运行良好，但在使用 Google Chrome 时它似乎不起作用。见下图：

不用担心字体，这只是在我的 Chrome 设置中。

这是 Elementor 中图像的设置：

有谁知道为什么会这样？

即使我添加 CSS

img{
    object-fit: cover;
}

它仍然无法正常工作。

编辑：我不认为它与 Elementor 或任何东西有关，只是与 Chrome 本身有关。如果我只是执行以下操作：

<html>
<style>
img{
    object-fit: cover;
    height: 200px;
    width: 200px;
}
</style>
<img src="228.jpeg">
</html>

它在 Chrome 中仍然无法正常工作，给出以下信息：

score 0 · Accepted Answer

因此，您想要的是包含 img 的 div 本质上充当位于 img 之上的框架，切断了该框架之外的 img 部分。您不会尝试更改实际图像的尺寸以适合框架内部。尝试将包含 div 的 img 的尺寸更改为 200px 的宽度和高度，如果这些是您希望 img 的尺寸。然后保持 object-fit:cover 但将 img 的宽度和高度更改为 100%。这将迫使它占据包含 div 的整个空间而不被扭曲。

css - Elementor Object Fit 在 Chrome 中无法正常工作

1 回答 1

Related

Reference