Why doesn't the IMG scale maintaining aspect-ratio? CSS

December 22, 2022

So I am trying to put some PNG files/Logos side-by-side in one line. I used flexbox for this purpose. However, the aspect ratio of the files is not correct. When I increase the Width, the size increases, however, it takes up the full Height and the aspect ratio breaks down.

The HTML:
`

<section class="companyLogos">
        <img src="./images/logo-google.png" alt="Logo of Google">
        <img src="./images/logo-ibm.png" alt="Logo of IBM">
        <img src="./images/logo-microsoft.png" alt="Logo of Microsoft">
        <img src="./images/logo-hp.png" alt="Logo of HP">
        <img src="./images/logo-vector-graphics.png" alt="Logo of Vector Graphics">
    </section>

The CSS:
`

.companyLogos {
        width: 96%;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
    }

    .companyLogos img {
        width: 8%;
    }

I am trying to do this:

>Solution :

You have to set object-fit: contain like this:

.companyLogos {
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
}

.companyLogos img {
  width: 8%;
  object-fit: contain;
}

<section class="companyLogos">
  <img src="https://via.placeholder.com/400x300" alt="">
  <img src="https://via.placeholder.com/400x280" alt="">
  <img src="https://via.placeholder.com/400x260" alt="">
  <img src="https://via.placeholder.com/400x240" alt="">
</section>

I hope this will help you.