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

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 >
        <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:

CodePudding user response：

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 >
  <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.

CodePudding user response：

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