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