问题标签 [object-fit]

我正在使用object-fit: cover一堆图像。图像的框架占据50vw并具有动态高度。封面属性效果很好，但这意味着我真的不知道我的实际图像在给定时间会有多宽。

它很可能会比 更宽，50vw并且由于适合对象的覆盖，它的溢出将被隐藏。

当我尝试使用 srcset 时，问题就出现了。我无法为尺寸属性提供可靠的宽度。

我知道大小只需要一个近似值，但我很好奇是否有人以前处理过这个问题。

我有一个大小和宽度可变的外部容器。假设在这个容器内，我有一个画布，我希望它尽可能地增长，同时保持比例而不是裁剪。为此，我通常会使用object-fit: contain.

现在，假设我不仅有一个画布，还有一个画布，旁边放置了另一个元素。

HTML：

CSS：

在这种情况下，我想缩放整个 externalContainer 的大小，就像我对画布所做的那样。问题是它object-fit实际上并没有缩放元素……它缩放了它的内容。这似乎不适用于普通的块元素，导致如果有足够的宽度，内部的画布可能会倾斜。

如果我添加object-fit: contain到canvas元素中，它会保持比例但仍使用全宽，这意味着.beside元素一直向右。这通过画布上的紫色背景进行可视化。

我想要的是outerContainer使用画布内容进行缩放，以便.beside始终具有画布内容的高度。应该在父元素中居中，在.outerContainer不扭曲画布的情况下占用尽可能多的空间。像这样，在任何比例范围内：

这对现代 CSS 可行吗？或者我必须使用脚本解决方案吗？

摆弄示例： https ://jsfiddle.net/nufx10zc/

我使用的是 flexslider（固定高度为 500 像素），但对其进行了轻微修改，以使图像即使高度超过 500 像素也能很好地显示。因此我添加了

适合对象：封面；对象位置：中心；

到 img-Tag 的 CSS。

但是，这不受支持，并且图像在 Internet Explorer 中以非常难看的方式拉伸。IE有什么好的后备解决方案吗？

我已经在 StackOverflow 上进行了搜索，但所有答案都不是很令人满意。

我一直在努力让我的图像适合它们的父元素。为了问一个更好的 StackOverflow 问题，我决定制作一个 codepen，但是当我这样做时，问题就解决了吗？但是，当我运行本地服务器时，它仍然没有解决。谁能解释一下？

外层：

内图：

http://codepen.io/evejweinberg/pen/vgRNWR

我有一个占屏幕约 75% 的视口，我使用object-fit: containcss 将不同纵横比的单个图像放入其中。在图像上方，我有文件名和类型的文本标签。我想保持这些对齐以从图像的最左边开始并在最右边结束。<img>我可以通过将它们与标签对齐来轻松做到这一点。

使用的一个副作用object-fit: contain是<img>元素比可视图片大，所以当我尝试将文本对齐时，<img>它可能会出现文本漂浮在图像之外。

img当标签扩展以适应整个视口但实际图片在img标签内自动缩放时，如何将文本与可视图像对齐object-fit: contain？

嘿，我之前问过一个类似的问题并且能够实现它，问题是我必须使用 png 图像，缺点是它太大了。

经过一些研究，我发现了一种使用 svg 容器和图像的 alpha 和 beta 通道的方法。

然而，我遇到的主要困难是让对象适合工作，因此图像将始终覆盖其 flexbox 容器的全部 50% ......这可能吗？我错过了什么……非常感谢。

https://codepen.io/HendrikEng/pen/RVzYoR?editors=0100

这是我的演示，以说明我的意思：

垂直或水平调整浏览器大小，可以清楚地看到问题。所以基本上我想把红色封面完全放在图像上。所以我假设我需要一个与图像大小完全相同的 div。似乎对象拟合做得很好，但正因为如此，我不能放置在红色 div 上。

可以做纯css吗？我应该如何修改dom和css？非常感谢！

澄清我想要实现的是：

我试图对我的应用程序中的元素使用对象拟合。我的 IDE 无法识别：

child.style.objectFit = '封面';

由于某些原因。它在 objectFit 下有波浪线。当我这样做时：

child.style.setProperty('object-fit', 'cover', '!important');

它不会出现在我的浏览器的检查器中。所以它不应用代码。

为什么它的行为如此奇怪？

我想使用object-fitCSS 规则。
MSIE 和 MS Edge 浏览器不支持此功能。
虽然有一些适用于 IE 的 polyfill，但据我所知，没有一个适用于 Edge。

例如，Jonathan Neal 的 polyfill fitie可以在 IE 中使用，但不能在 Edge 中使用（至少不在我的机器上）。这是因为 fitie 使用了 MS only JS 对象element.currentStyle，element.runtimeStyle这些对象不再在 Edge 浏览器中得到任何支持。但如果我使用window.getComputedStyle(element).getPropertyValue('object-fit')，Edge 什么也不返回。

那么如何object-fit在 MS Edge 浏览器中用 JavaScript 获取 CSS rule rule 的值呢？

编辑

它必须以某种方式成为可能，因为它没有被完全忽略。
开发者工具显示规则带下划线

奖金问题：

是否有任何适用于 Edge 的对象拟合 polyfill？

我正在使用适合视频的对象。我看到在 IE 和其他一些浏览器中不起作用。是否可以创建类似 Object-fit:fill 的东西与 Javascript/Jquery 一起使用？