问题标签 [object-fit]

Codepen Example

Many other images work fine. In other browsers everything also works as expected.

What can be the problem?

Chrome Version 84.0.4147.89

我正在构建一个具有可变内容的组件。所以我希望 img 像 bg img 一样响应，取其容器的高度而不是定义高度。即使我定义object-fit: cover了 add ， img 仍然会影响其父级的高度。我希望文本定义父级的高度，而不是 img。我不希望使用背景图像，因为图像是通过所见即所得编辑器填充的，并且我无法控制上传的图像的加载位置（即它必须是图像）。谢谢你的帮助。

代码沙盒

代码：

我对 css 属性 object-fit 和/或 aspect-ratio 有一个小问题。

1. 上下文：我有一个包含图像和一些文本的块（一个大链接）。图像的尺寸和纵横比未知。
2. 我想强制图像尺寸而不变形，使其适合已知纵横比的显示区域。示例：我希望我的图像始终显示在 4/3 区域，宽度 100%，最大宽度 400 像素。我的问题是宽高比，我无法解决。我想要这样：
   • 浏览器查看可用宽度，并计算相应的图像宽度（即，无 pb）
   • 应用 4/3 纵横比来推断显示区域高度
   • 在此区域中显示图像，如果需要放大它，同时保持其固有的纵横比（即，无 pb）

非常感谢任何帮助

我想知道哪些浏览器支持 CSS 属性object-fit: cover。我通常混合使用Mozilla 浏览器兼容性表和caniuse，但是，它们提供的信息略有不同。例如，在 Mozilla 上，支持 Chrome for Android 版本 31，但是，caniuse 声明至少支持版本 84。上述差异的正确/原因是什么？

我将如何测试object-fit: cover适用于 Android 版本 55 的 Chrome 的属性？使用类似的东西lambda不支持在移动设备上选择不同的浏览器（就像他们在桌面上所做的那样），并且将提供最新版本的浏览器。

从长远来看，未来我应该依靠哪一个？

如果我使用的是变换比例，有没有办法使用覆盖来保持对象适合图像的拉伸？这是我的代码

html

这是一个解释我的意思的小提琴：

http://jsfiddle.net/n1x5ak2t/

如果图像只是按比例放大以适应新的 div 宽度而不失真，我会很高兴。

在这篇文章中，我们可以阅读：

object-fit CSS 属性设置如何调整替换元素的内容，例如<img>or <video>，以适应其容器。

在这种情况下，容器是什么意思？

父元素？包含块？

我有一个容器，其中将连续出现多个图像（幻灯片放映）。有些图像是横向格式，有些是纵向格式。还有两个侧面板应该占据图像容器左右两侧的剩余空间。图像和侧面板具有固定的高度，因此图像（和中央容器）的宽度应根据图像的比例进行调整。但是，我无法完成这项工作。

正如您在片段中看到的那样，原始图像相当大，即使在调整大小之后，图像对象也很大。图像两侧的白色区域应被绿色面板占据。我究竟做错了什么？

我有以下代码来模拟object-fit:containIE 兼容性。

我想将内部包裹img在一个 div 中，同时让一切看起来都一样。我怎样才能做到这一点？

对象拟合不起作用，我不知道为什么。它仅适用于图像标签中的内联样式。任何人都可以解释一下吗？也许 hero_media 容器会影响对象匹配？我还尝试使用伪元素（ after 和 before ）向图像添加文本。只需要修改 hero_media 容器

我想这是不可能的，但想仔细检查一下：如果我有一个适合对象的图像：包含；然后单击图像外部（在背景上）但仍在 img 框架内 - 有没有办法让 click 事件绕过 img，就像我在 img 框架外单击一样？

像这样？谢谢！