make images same size without manipulating their size individually?-CodePudding

I am trying to put some logos in a row and a div wraps each logo the problem is that When I am giving a specific width to all the logo wrapper Divs some are becoming small and vice versa (I know it is due to the Dimension of the Logs {Images}) But is there any way we can make all the logos look even by on a single CSS property.

I hope I am able to clarify the question.

Any help is highly appreciated!

.logos-container{
    background: #ddd;
}
.logos-container .client-logo{
    width: 120px;
}
.logos-container .client-logo img{
 width: 100%;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 
 <div >
            
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
            </div>
        </div>
 
 
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
  </body>
</html>

CodePudding user response：

Use object-fit to let the browser calculate the containing scale ratio for the image data size:

.client-logo img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
}

or use cover instead of contain if you want the images to fit perfectly without blanks.

CodePudding user response：

Just give a specific height to the images. We cannot apply equal width because of the different sizes of logos so let that be 100%.

.logos-container .client-logo img{
  height:50px;
  width: 100%;
}

CodePudding user response：

Set a height instead of a width:

.logos-container{
    background: #ddd;
}

.logos-container .client-logo img{
    height: 80px;
    width: auto;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 
 <div >
            
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
            </div>
            <div >
                <img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
            </div>
        </div>
 
 
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
  </body>
</html>