如何在 IE 和 Edge 中實作「object-fit: cover」行為？

在IE 和Edge 中使用物件適合來修復影像的寬高比問題

儘管CSS 的物件適合屬性得到了廣泛支持，但某些Internet Explorer (IE) 和Microsoft Edge 等瀏覽器在縮放映像時可能會出現不良行為。影像可能會調整寬度而不是高度，從而扭曲其縱橫比。

要解決此問題，可以採用以下CSS 技術：

1. 將影像絕對定位在它的容器：

   position: absolute;

2. 使用頂部、左側和變換屬性的組合將影像居中：

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

3. 調整影像的高度和寬度取決於其方向：

   // Vertically-oriented blocks
   height: 100%;
   width: auto;
   
   // Horizontally-oriented blocks
   height: auto;
   width: 100%;

此方法使影像能夠模仿object-fit: cover 的效果，確保在縮放時保持縱橫比。

這裡是此技術的現場示範：

https://jsfiddle.net/furqan_694/s3xLe1gp/

此解決方案是跨瀏覽器相容的，確保影像在IE、Edge 和其他現代瀏覽器中正確顯示。

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