首页 > web前端 > css教程 > 对象适合:IE 和 Edge 中的覆盖失败,如何修复?

对象适合:IE 和 Edge 中的覆盖失败,如何修复?

Linda Hamilton
发布: 2024-11-01 23:31:29
原创
442 人浏览过

Object-Fit: Cover Fails in IE and Edge, How to Fix?

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板