如何修復 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中文網其他相關文章！