问题标签 [object-fit]

我有一个比它高的横幅图像。我有一个显示不同大小图像的容器 div，对于横幅样式，我需要它拉伸和/或挤压以在两个方向上填充父 div。我看过object-fit:fill，但它似乎只是水平拉伸图像 - 它没有做任何让它垂直填充 div 的事情。

一个工作示例在这里；代码如下所示：

我究竟做错了什么？（我已经尝试了 的各种值object-fit，但它们都没有满足我的需要。）图像应该被水平挤压并垂直拉伸以完全填充绿色边框内的区域。

我正在开发一个个人资料类型的模板——页面的一半（class="actor-info"）应该显示可滚动的文本和关于一个人的信息，另一半应该由这个人的肖像图片填充。图片应该总是占据屏幕的一半——所以裁剪就可以了。

到目前为止我所拥有的：

• 所有祖先元素设置为高度 100%
• 左列和右列都是弹性框
• 图像容器具有属性object-fit: cover;
• 图像容器具有属性position:fixed;
• 图像高度和宽度设置为auto

基本上它看起来“好像”它工作正常 - 但是当使用图像更改浏览器窗口时不会采用宽度 - 所以在某些时候肖像不会填充高度。

到目前为止我所拥有的：

CSS：

我希望有人做过这个/以前去过那里吗？所有指针表示赞赏！谢谢！

编辑：我添加了我拥有的“线框”——以及我想要拥有的。图像应始终“覆盖”红色矩形，并且会在矩形（.img-container）处被裁剪。

我正在使用 object-fit 和 object-position css 属性来控制图像在 css 中的位置。我想用 javascript 以编程方式设置该位置。我试过了：

什么也没有发生。

我可以控制台记录 element.style 并且我看到一个 objectPosition 属性，但设置它似乎没有效果。

请注意，我不是在谈论position属性（绝对属性、相对属性等）。

我还可以使用 jquery 设置此属性：

但我想避免使用 jQuery。有任何想法吗？

Considering the following code:

I would expect object-fit: contain to make the img shrink into the .box, automatically sized by the flex container. Instead of my expectation, it overflows from the box. What is wrong in my code?

在某些情况下，当 HTML 中的父元素之一margin在padding底部或顶部定义时，您的video对象将无法将源媒体扩展到其自身。即使您定义了标签，object-fit:cover您仍然会在标签的顶部或底部有小间隙video。据我所知，这仅在 Google Chrome 中发生。

我使用flexbox编写了这个响应式图片库代码，我将每个 flexbox_item

的背景颜色样式设置为 cyan ，以显示每个 flexbox_item 块的尺寸：

现在我想要图像填充它们的块，所以我使用了：

但它不起作用！

我尝试了很多东西，但图像仍然没有填满它们的块！请帮忙 。这是代码：

请向我展示不同的示例或更有效的方式来显示这两个 div。有没有办法在没有 flex 的情况下做到这一点？

此外，我正在尝试对图像进行对象拟合，但它似乎不起作用......

编辑：我也忘了添加，如何让它们在某个断点处相互叠加显示？

请看这个例子：https ://codepen.io/zadro/pen/WJjRVd

我试图<img>在不拉伸或改变图像比例的情况下完全填充它的包装。

看到object-fit没有 polyfills 不适用于 IE/Edge，这个解决方案是否涵盖所有边缘情况？

我看到的唯一问题是可能需要专门裁剪长度或宽度非常长的图像以在照片中显示所需的内容......或位置值改变......取决于容器的形状是如何与图像的形状有关。

CSS 对象适合位置fill，contain正在工作，但cover工作方式类似fill. 无论图像有多少部分，它都必须在不拉伸的情况下填充 div cover。我将 div 设置为flex并应用于object fit positiondiv 内部的图像。为什么cover不工作？如果我将高度设置px为图像它可以工作，但图像必须根据 div 调整大小，所以我设置了高度auto

我正在尝试将 A4 大小的 div 放入较小的元素中。我想过用object-fit: contain;这个。当我阅读MDN上的文档时，它似乎非常适合我的需要。自动缩放很甜。我想我在某个地方忘记了什么。

在线尝试！

注意我无法使用网格。