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

Question

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:

Answer 1

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.

Answer 2

Following two approaches would be useful-
1. Using object-fit: contain-
If we use object-fit: contain; the image keeps its aspect ratio, but is resized to fit within the given dimension.
.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://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of Google">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of IBM">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of Microsoft">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of HP">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of Vector Graphics">
</section>
2. Using object-fit: cover-
If we use object-fit: cover; the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
.companyLogos {
width: 96%;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
}
.companyLogos img {
width: 8%;
object-fit: cover;
}
<section class="companyLogos">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of Google">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of IBM">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of Microsoft">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of HP">
<img src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" alt="Logo of Vector Graphics">
</section>