问题标签 [object-fit]

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

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

这是 Elementor 中图像的设置：

有谁知道为什么会这样？

即使我添加 CSS

它仍然无法正常工作。

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

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

我有一个全宽横幅，我使用这种风格：

这适用于 Chrome。当我使用CTRL+-全宽横幅缩小时，调整得很好。然而，在 IE 中，它看起来像样式object-fit: cover;不起作用。我尝试使用

横幅的宽度工作正常，它得到了 100%，但高度是问题，我的猜测是因为有一个绝对位置，图像没有移动高度，所以图像没有得到完整的高度。

有没有一种方法可以object-fit: cover;在 IE 中复制我尝试过的其他样式？

我正在使用 object-fit: cover; 在我的 CSS 中排列页面上的图像，因为它们需要具有相同的高度。它在大多数浏览器中都能完美运行，但 IE11 会扭曲图像。

我读到我可能可以使用@support 来解决这个问题，但我不明白该怎么做？或者还有其他我可以使用的选项吗？

我使用的代码如下 - 非常感谢任何帮助。

我有一个固定高度的容器，我想在其中显示图像和标题。要求是图像应缩放以适应可用高度，同时保持纵横比。标题可以是可变高度。

下面是我到目前为止所拥有的 JS 小提琴。我无法让图像右侧和左侧的空白消失（我在 img 标签中添加了一个边框以显示我的意思）。是否可以删除多余的空格？

https://jsfiddle.net/peL1a7vj/1/

HTML

CSS

这类似于CSS object-fit: contains; 在布局中保持原始图像宽度，但我无法使用接受的答案中建议的方法修复它

我已经搜索过许多类似的问题，但似乎没有一个能完全涵盖我正在寻找的内容。

基本上我希望用 flexbox 制作相等的宽度和高度列，一个带有实际图像标签，一个只带有文本。图像必须是使用 object-fit:cover 而不是背景图像的图像标记。

我已经很接近了，但是当容器太宽时，文本列的高度与图像的高度匹配，而不是相反，在文本下方留下一个很大的丑陋空间，我真的希望将其删除。

下面的链接图像显示了我希望删除的部分列。

到目前为止，我已经创建了一个 Codepen：

https://codepen.io/ash-media/pen/Vwmoebj

Codepen 的 HTML 代码如下：

CSS如下：

虽然不是问题的一部分，但它会在较窄的宽度上切换到垂直布局，所以请忽略它。这是我在 StackOverflow 上的第一个问题，所以如果我做错了什么，请放轻松。

提前致谢！

此图像显示了不应存在的两列部分

在我看来，图片应该缩小以适合块，但这不会发生。为什么？

我有img一个article. article高度与body减去顶部相同（nav当然是可变的）。我发现object-fit工作的唯一方法是在 中放置一个固定的高度article，这没有意义，因为它的高度是动态的。

我究竟做错了什么？

我为这个网站建立了一个基于网格的照片布局： https ://lsiemoneit.de/digital-identity/photos.html

它就像我在 Firefox 和 Chrome 中预期的那样工作，但在 Safari 中布局中断。我附上了一个代码笔，它在下面复制和隔离了这种行为。不知何故，在 Safari 中，网格行被拉伸到 100%，而在 Chrome 和 Safari 中，它保持纵横比。这与 Safari 如何处理 object-fit: contains 有关吗？

https://codepen.io/lkssmnt-the-lessful/pen/oNBLZyZ

谢谢你的帮助！

我有一个容器image-wrapper和里面的图像。

容器具有固定的高度和宽度。在其中，图像分辨率将是动态的。

我要做的就是将图像水平和垂直居中放置在容器中，并box-shadow对其应用一些样式。

但是它在图像周围留下了一个空白区域，看起来很奇怪。下面是代码。垂直图像也会发生同样的情况。

我只想在图像周围有一个阴影，没有空格。我想我在这里遗漏了一件非常简单的事情。

我试图添加position: relative到容器中，但它没有用。

我试图通过搜索“ css object fit image shadow ”、“ css object fit on image 添加空格”之类的东西来搜索它，但没有找到任何类似的东西。

我有一个 flexbox 容器，我试图在其中并排显示两个带有阴影的图像。即使图像大小不同，我也希望它们占据相同数量的水平空间。我正在使用样式为“display：flex”的容器，并为图像使用“object-fit：contain”以使其缩放。如果我不给容器一个特定的高度，我的代码就可以工作。如果我给容器一个特定的高度，例如 300 像素，图像会按比例缩小，但阴影会出现在距图像边缘一定距离的地方，就好像有一个盒子包裹着它们一样。这似乎是奇怪的行为。谁能解释这种看起来很奇怪的行为，有没有办法可以给容器一个高度并且仍然让它工作？

小提琴来说明：https ://jsfiddle.net/Lej1a6vp/

html:

CSS：