如何解決 IE 和 Edge 中的「object-fit: cover」問題？

修復物件適合：IE 和Edge 中的覆蓋問題

在這種情況下，影像在使用時要保持一致的高度object-fit：封面，IE 和Edge 瀏覽器中出現的挑戰。這些瀏覽器不是縮放圖像，而是改變其寬度，從而導致外觀扭曲。

要解決此問題，可以採用CSS 技術的組合：

1. 將影像居中： 使用絕對定位屬性，將影像放置在其容器的中心。這是透過以下程式碼實現的：

<code class="css">position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code>

2. 調整影像大小：根據影像的方向（垂直或水平），調整其高度和相應的寬度：

<code class="css">// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;</code>

這種CSS 組合可以實現所需的物件適合：覆蓋效果，確保影像在IE 和Edge瀏覽器中按預期縮放和縮放，同時保持一致的高度在其他瀏覽器中。

以上是如何解決 IE 和 Edge 中的「object-fit: cover」問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！