如何修复 PNG 的 IE 拉伸?

Question

我正在使用对象适合属性来调整所有文件的大小.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;
}

Answer 1

从这个链接中，我们可以知道对象适合的CSS属性不支持IE浏览器。

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

有关CSS背景属性的更多详细信息，请查看以下链接。

CSS 背景属性

此外，您还可以参考此示例，并使用Javascript检测浏览器，然后重置CSS样式。