问题标签 [object-fit]

我一直试图让我的图像在同一条线上彼此相邻，如果需要，只需将它们裁剪成更小的尺寸。为什么不起作用object-fit？

HTML：

CSS：

我有两种方法可以为网站设置全屏背景视频，下面，我有两种方法的演示：

方法#1： https ://codepen.io/irfan-dayan/pen/MqYaMd

方法#2 object-fit： https ://codepen.io/irfan-dayan/pen/JaoGEE

哪一种是最好和推荐的方法？是否object-fit:cover推荐设置全屏背景视频的方法？

我有以下轮播：

我有以下CSS：

我有比屏幕大得多的图像（宽度：100% 和高度：100%），我希望它们是imgs 可以在屏幕中心保持纵横比，因此object-fit: cover;和object-position: 50% 50%，但它不工作。为什么？

我正在尝试制作一个全屏练习主页，其中包含在不同幻灯片中具有不同文本区域的滑动图像/视频。

在此处输入图像描述

在上图中，您可以看到原始图像大小和图像在赋予属性“object-fit:contain”后缩小。

我们可以在给出“Object-fit:contain”属性后计算有效图像大小吗？

我有一个这样的html页面：

这个对象非常适合 google chrome 和 firefox ，但不幸的是不在 IE 中。我不想用作背景图像，因为我将来会在轮播中使用此图像？有没有其他方法可以让我在固定高度的 div 中放置图像而不会拉伸和溢出？注意：对象适合：包含完全满足我的要求，但在 IE 上失败。

这css从 Boostrap 4 中取出了卡片的响应式布局。我怎样才能object-fit: cover;在卡片的图像上放置一个，并从 Bootstrap 4 中获得响应式布局？

没有object-fit: cover;：

与object-fit: cover;：

我可以更改widthid 上的#imgUNcoverimagen ，但它不会解决不同结果屏幕中的问题。

编辑：

我如何限制图像的最大高度，使其与同级的高度相同，而不管屏幕尺寸如何。

可接受的结果 => 相同高度 - √</a>

由于图像列高度超过其兄弟的 => (DIV - .main-content)，因此结果不可接受。 无效的一个 - X

PS Background-image 属性在这种情况下不适用。

我正在使用一个带有灯箱的 flexbox 画廊，不幸的是它使用了 object-fit:cover，它在 Internet Explorer 中不起作用。我尝试了几个修复程序，但任何使用这些图像作为背景图像的脚本都会阻止灯箱功能工作。其他任何事情都会破坏灯箱。

这是HTML：

和javascript：

有没有办法让图像在 Internet Explorer 中保持比例？这是该页面的示例：http: //jh-portfolio-test-2.blogspot.com/2018/11/project-test.html

我正在尝试使用 使我的图像在一些 flexbox 容器中响应object-fit: contain，并且虽然图像确实调整了大小，但布局似乎保持了原始图像大小，导致出现滚动条。

使用Chrome Dev Tools查看图片的宽度，发现宽度还是1024（不过高度已经适当降低了）

（我从CSS FlexBox Layout 中的 Auto Resize Image 和保持 Aspect Ratio 中获得灵感？到此为止）

我是否缺少一些额外的 CSS 属性？

JSFiddle：https ://jsfiddle.net/w6hgqf18/1/

我需要实现一个视频，它会填满容器。要求使用纯 CSS，而不是使用 Javascript。

我浏览了互联网，得出的结论是有两种纯 CSS 方法可以解决这个问题，但它们仍然存在缺陷。

1. min-height和transform：使用这是迄今为止最糟糕的解决方案，因为视频将扩展到其原始宽度和高度。如果容器比视频小得多，那么显示就有点奇怪了。

2. object-fit：这似乎是迄今为止最好的解决方案，但是...... IE 不支持（仍然是这个经典问题）。

仅使用 CSS 是否有有效且跨浏览器的方法（甚至解决方法、黑客等）。任何帮助表示赞赏！

这是我的代码笔来总结我的问题。

https://codepen.io/thaido-solislab/pen/GzYjqG