如何在IE和Edge中实现'object-fit: cover;”图像缩放？

CSS 修复 IE 和 Edge 中的图像缩放

使用 object-fit: cover 时；对于页面上图像的 CSS 规则，在 IE 或 Edge 中缩放浏览器时，可能会遇到图像调整宽度（而不是高度）大小而不是缩放的问题。这会导致图像扭曲。

要解决此问题，可以实施 CSS 解决方案：

1. 使用以下代码将图像绝对定位在其容器内：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

这将使图像在其容器内居中。

2. 根据图像的方向（垂直或水平），相应地设置高度和宽度属性：

• 对于垂直块（高度大于宽度）：

  height: 100%;
  width: auto;

• 对于水平块（宽度大于高度）：

  height: auto;
  width: 100%;

这为图像提供了所需的对象拟合：封面；效果，确保它在 IE 和 Edge 中调整大小时按比例缩放。

以上是如何在IE和Edge中实现'object-fit: cover;”图像缩放？的详细内容。更多信息请关注PHP中文网其他相关文章！