对象适合：IE 和 Edge 中的覆盖失败，如何修复？

Object-Fit：覆盖在 IE 和 Edge 中失败，如何修复？

利用 object-fit: cover;在 CSS 中保持一致的图像高度可以在浏览器之间无缝运行。然而，在 IE 和 Edge 中，出现了一个特殊的问题。缩放浏览器时，图像会调整宽度而不是放大高度，从而扭曲其外观。

为了解决此问题，我们采用了巧妙的 CSS 解决方案来解决该问题：

位置: 绝对;
顶部: 50%;
左: 50%;
变换: 平移(-50%, -50%);
高度: 100%;
宽度： 汽车; // 对于垂直块
height: auto;
width: 100%; // 对于水平块

此组合使用绝对定位将图像定位在中心，消除了 IE 和 Edge 中的 object-fit: cover 问题。图像现在将按比例缩放，保持所需的效果而不失真。

为了说明解决方案的有效性，请考虑以下演示：

图像调整大小演示

这种方法确保了所有浏览器中图像行为的一致性，有效解决了 IE 和 Edge 中的 object-fit: cover 问题。

以上是对象适合：IE 和 Edge 中的覆盖失败，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！