物件適合：IE 和 Edge 中的覆蓋失敗，如何修復？

Object-Fit：覆蓋在 IE 和 Edge 中失敗，如何修復？

利用 object-fit: cover;在 CSS 中保持一致的圖像高度可以在瀏覽器之間無縫運行。然而，在 IE 和 Edge 中，出現了一個特殊的問題。縮放瀏覽器時，影像會調整寬度而不是放大高度，從而扭曲其外觀。

為了解決此問題，我們採用了巧妙的CSS 解決方案來解決該問題：

位置: 絕對;
頂部: 50%;
左: 50%;
變換: 平移(-50%, -50%);
高度: 100%;
寬度： 汽車; // 對於垂直塊
height: auto;
width: 100%; // 對於水平塊

此組合使用絕對定位將影像定位在中心，消除了IE 和Edge 中的object-fit: cover 問題。影像現在將按比例縮放，保持所需的效果而不失真。

為了說明解決方案的有效性，請考慮以下演示：

圖像調整大小演示

這種方法確保了所有瀏覽器中影像行為的一致性，有效解決了IE 和Edge 中的object-fit: cover 問題。

以上是物件適合：IE 和 Edge 中的覆蓋失敗，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！