首頁 > web前端 > css教學 > 如何在IE和Edge中實現'object-fit: cover;”圖像縮放?

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

Barbara Streisand
發布: 2024-11-02 00:36:02
原創
975 人瀏覽過

How to Achieve `object-fit: cover;` Image Scaling in IE and Edge?

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

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

要解決此問題,可以實施CSS 解決方案:

  1. 使用以下程式碼將影像絕對定位在其容器內:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
登入後複製

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

  1. 根據影像的方向(垂直或水平),相應地設定高度和寬度屬性:
  • 對於垂直塊(高度大於寬度) :

    height: 100%;
    width: auto;
    登入後複製
  • 對於水平塊(寬度大於高度):

    height: auto;
    width: 100%;
    登入後複製

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板