在特定图像需要使用 CSS 的 object-fit: cover 保持一致高度的情况下;属性,用户可能会在 IE 和 Edge 浏览器中遇到问题。缩放浏览器时,图像会调整宽度而不是缩放,从而导致失真。
要解决此问题,请考虑以下 CSS 方法:
<code class="css">position: absolute;</code>
<code class="css">top: 50%; left: 50%; transform: translate(-50%, -50%);</code>
<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中文网其他相关文章!