如何修复PNG的IE拉伸？答案

【问题标题】：How to fix IE stretching of PNGs?如何修复PNG的IE拉伸？
【发布时间】：2019-08-27 13:50:34
【问题描述】：

我正在使用 object-fit 属性来调整所有 .PNG 文件的大小并使其适合 div。这在 Chrome 上看起来很棒，但 .PNG 文件在 Internet Explorer 上被拉伸了。

我使用了一些在 SO 上找到的方法，但似乎没有什么可以让它不伸展。我不知所措。请帮助并记住我仍在学习。谢谢！

<div class="container-fluid brand-logo-container">
    <div class="row container-fluid d-flex">
        <img class="brand-logo" src="img/eaw.png" alt="EAW" />
        <img class="brand-logo" src="img/adamson.png" alt="Adamson 
                  Systems" />
        <img class="brand-logo" src="img/electrovoice-logo.png" 
                  alt="Electro-Voice/>
        <img class="brand-logo" src="img/avid-logo.png" alt="AVID"/>
            <img class="brand-logo" src="img/MIDAS.png" alt="Midas 
             Consoles"/>
        <img class="brand-logo" src="img/yamaha.png" alt="Yamaha Pro Audio"/>
        <img class="brand-logo" src="img/logo-camco.jpg" alt="Camco" />
        <img class="brand-logo" src="img/labgruppen.png" alt="Lab Gruppen" />
        <img class="brand-logo" src="img/shure.png" alt="Shure" />
        <img class="brand-logo" src="img/sennheiser.png" alt="Sennheiser" />
        <img class="brand-logo" src="img//Telefunken.png" alt="Telefunken-Elektroakustik"/>
        <img class="brand-logo" src="img/Audio-technica.png" alt="Audio-Technica"/>
     </div>
</div>

.brand-logo {
    object-fit: scale-down;
    margin-left: auto;
    margin: auto;
    width: 15vw;
    height: 6vw;
}

.brand-logo-container {
    background-color: #cccccc;
    border-style: solid;
    border-radius: 25px;
    border: 2px;
    border-style: solid;
}

【问题讨论】：

如果您需要支持 IE，您可能最好在容器上设置高度/宽度，并使用定位或 flex 方法来缩放图像。这两个问题可能会为您指明正确的方向stackoverflow.com/questions/28439310/… 和stackoverflow.com/questions/31853749/…。
你应该改变品牌标志的宽度和高度 px 而不是 vw 或 vh

标签： html css internet-explorer

【解决方案1】：

从this link可以得知object-fit CSS属性不支持IE浏览器。

作为一种解决方法，您可以将图像显示为容器背景图像，然后使用 CSS background-size、background-repeat 和 background-position 属性来调整图像大小并设置位置。

关于 CSS 背景属性的更多细节，请查看以下链接。

CSS background Property

另外，你也可以参考这个示例，使用Javascript检测浏览器，然后重置CSS样式。

【讨论】：