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

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

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

要解决此问题，请考虑以下 CSS 方法：

1. 将图像绝对定位在其容器内：

<code class="css">position: absolute;</code>

2. 使用以下组合将图像居中：

<code class="css">top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code>

3. 设置图像的以下尺寸：

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