问题标签 [object-fit]

有object-fit: contain一种方法可以调整图像的大小，使整个图像适合框架，将图像的长边与框架对齐。

但是，这不适用于 div 标签等，它仅适用于替换元素。

如何object-fit: contain使用 div 标签、span 标签等重现与替换元素相同的行为？当纵横比不匹配时，我想显示信箱。

我一直找不到任何文件来告诉我一种或另一种方式。

我可以在画布元素上使用适合对象的封面吗？我做了一些实验，但它的表现并不像预期的那样。

有人可以给我一个明确的答案吗？

在尝试使图像适合矩形时，我遇到了一个奇怪的问题，想知道是否有人知道为什么这三种使用对象适合的方式会有所不同：

正如您从第一张图片中看到的 - 一切都适用于宽度和高度。在第二个图像中，我尝试设置图像，使其以绝对定位而不是宽度和高度填充空间，但这完全被忽略了，图像只是溢出或保持其原始大小。

为了解决这个问题，我在第三张图像上使用了最大宽度和高度，但这完全忽略了对象位置，并且不会增长到比自身更大的宽度或高度。

为什么对象适合仅适用于声明的宽度和高度，而不是如果图像只是占用坐标空间，为什么对象位置不适用于最大宽度和高度？

我正在尝试设置一个网格布局，上面有图像object-fit: cover，但这似乎在网格布局上设置了一个最小高度。这是故意的，还是我做错了什么？

这是我的标记：

和造型：

如果我在.test网格容器上低于 170px 高度，它不会缩小。如果我切换到background-image在.itemdiv 上使用并删除<img/>，它工作正常。虽然我不想这样做，但我需要图像标签才能正确标记。

这是在 codepen 上运行的代码

I have a problem scaling down canvas elements that belong to grid container.

The above code shows canvas that have width: 20 and height: 60 scaled with the result aspect ratio of 1:2. What I need is a canvas element that fits into maximum grid row height and column width, and, remains constant with its aspect ratio.

我一直在研究 jQuery 图像放大解决方案，几乎可以完美运行。但是（我相信这可能与使用object-fit: cover有关）当图像被放大时，它会略微失真。放大图像的background-size由下一行决定，我认为这可能是失真的原因，因为它正在检索 img 的边界框，而不是真实尺寸（再次，由于object-fit: cover）。但是，我需要使用object-fit: cover，因为我希望我的所有 .image 容器保持相同的纵横比，而不管图像如何。

任何想法如何防止失真？

HTML

SCSS

查询

我用来在我的网站object-fit:cover上播放背景视频（向下滚动）。Firefox 和 Chrome 可以正确显示它，但 Edge 不能 - 尽管它支持该属性。object-fit

为什么 Edge 没有像应有的那样显示它？

努力让事情表现得很好。

我在响应式网站上有一个动态图像列表。生成布局，其中图像可以在行/列或列行中。

这个例子很接近，但是当浏览器调整大小时，配对的图像在底部没有对齐......

我已经尝试过对象匹配，但 Safari 似乎分崩离析。

编辑：供参考这里是问题的一个例子。

有人可以告诉我为什么 div 和图像是垂直分离的吗？

对我来说，网站看起来像这样：
图片 （我为此拍了一张黑色图片。）

如果你能告诉我这背后的原因，你能不能也告诉我一个纠正它的方法，所以两者都从相同的高度开始。它看起来有点像以下网站：
petermckinnon

我也愿意接受一些不同的方法来解决这个问题。

我正在使用 html、css(flexbox) 制作图片库。问题是当我在图像上使用object-fit: cover属性时，当鼠标悬停时，div 内的图像会抖动。