How to fix IE stretching of PNGs?

Question

I am using object-fit property to size all .PNG files and make them fit in a div. This looks great on Chrome but the .PNG files are stretched on Internet Explorer.

I have used a few methods found on SO but nothing seems to make it not stretch. I'm at a loss. Please help and keep in mind I am still learning please. Thanks!

<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;
}

If you need to support IE you are probably best setting the height/width on the container and use a positioning or flex method to scale the image. These two questions may point you in the right direction https://stackoverflow.com/questions/28439310/scale-an-image-to-maximally-fit-available-space-and-center-it/28450112#28450112 and https://stackoverflow.com/questions/31853749/max-width-of-img-inside-flexbox-doesnt-preserve-aspect-ratio/31856947#31856947. — Hidden Hobbes, Aug 06 '19 at 16:30
you should change brand-logo width and height px instead of vw or vh — Ranjith v, Aug 07 '19 at 05:50

Zhi Lv · Accepted Answer · 2019-08-27T05:50:34.050

From this link, we can know that the object-fit CSS property not support IE browser.

As a workaround, you could display the image as a container background image, then, using the CSS background-size, background-repeat and background-position Property to resize the Image and set the position.

More details about CSS background property, please check the following link.

CSS background Property

Besides, you could also refer to this sample, and use Javascript to detect the browser, then reset the CSS style.

How to fix IE stretching of PNGs?

1 Answers1