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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>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.
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%;
}
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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>