首頁  >  文章  >  web前端  >  如何修復 IE 和 Edge 中的物件適配:覆蓋失真?

如何修復 IE 和 Edge 中的物件適配:覆蓋失真?

DDD
DDD原創
2024-11-03 03:11:02605瀏覽

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