如何在 IE 和 Edge 中实现'object-fit: cover”行为？

在 IE 和 Edge 中使用对象适合来修复图像的宽高比问题

尽管 CSS 的对象适合属性得到了广泛支持，但一些Internet Explorer (IE) 和 Microsoft Edge 等浏览器在缩放图像时可能会出现不良行为。图像可能会调整宽度而不是高度，从而扭曲其纵横比。

要解决此问题，可以采用以下 CSS 技术：

1. 将图像绝对定位在它的容器：

   position: absolute;

2. 使用顶部、左侧和变换属性的组合将图像居中：

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

3. 调整图像的高度和宽度取决于其方向：

   // Vertically-oriented blocks
   height: 100%;
   width: auto;
   
   // Horizontally-oriented blocks
   height: auto;
   width: 100%;

此方法使图像能够模仿 object-fit: cover 的效果，确保缩放时保持纵横比。

这里是该技术的现场演示：

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

该解决方案是跨浏览器兼容的，确保图像在 IE、Edge 和其他现代浏览器中正确显示。

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