如何在IE和Edge中實現“object-fit: cover;”圖像縮放？

CSS 修復IE 和Edge 中的圖像縮放

使用object-fit: cover 時；對於頁面上圖像的CSS 規則，在IE 或Edge 中縮放瀏覽器時，可能會遇到影像調整寬度（而不是高度）大小而不是縮放的問題。這會導致影像扭曲。

要解決此問題，可以實施CSS 解決方案：

1. 使用以下程式碼將影像絕對定位在其容器內：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

這將使圖像在其容器內居中。

2. 根據影像的方向（垂直或水平），相應地設定高度和寬度屬性：

• 對於垂直塊（高度大於寬度） ：

  height: 100%;
  width: auto;

• 對於水平塊（寬度大於高度）：

  height: auto;
  width: 100%;

這為圖像提供了所需的對象擬合：封面；效果，確保它在IE 和Edge 中調整大小時按比例縮放。

以上是如何在IE和Edge中實現“object-fit: cover;”圖像縮放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！