首页  >  文章  >  web前端  >  如何修复 IE 和 Edge 中的对象适配:覆盖失真?

如何修复 IE 和 Edge 中的对象适配:覆盖失真?

DDD
DDD原创
2024-11-03 03:11:02659浏览

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

解决 IE 和 Edge 中的 Object-Fit: Cover 失真

在特定图像需要使用 CSS 的 object-fit: cover 保持一致高度的情况下;属性,用户可能会在 IE 和 Edge 浏览器中遇到问题。缩放浏览器时,图像会调整宽度而不是缩放,从而导致失真。

要解决此问题,请考虑以下 CSS 方法:

  1. 将图像绝对定位在其容器内:
<code class="css">position: absolute;</code>
  1. 使用以下组合将图像居中:
<code class="css">top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code>
  1. 设置图像的以下尺寸:
<code class="css">// For vertical blocks (height greater than width):
height: 100%;
width: auto;

// For horizontal blocks (width greater than height):
height: auto;
width: 100%;</code>

这种方法模拟了 object-fit: cover 的效果;并确保在所有浏览器(包括 IE 和 Edge)上的行为一致。

有关实际演示,请参阅:

https://jsfiddle.net/furqan_694/s3xLe1gp/

以上是如何修复 IE 和 Edge 中的对象适配:覆盖失真?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn