如何无需单独调整尺寸 通过CSS属性实现多Logo图片大小统一

同一行排列的Logo均由独立div包裹，给外层div设置统一宽度后，因Logo原始尺寸、宽高比存在差异，出现部分Logo视觉偏大、部分偏小的问题，需要无需逐个调整单张图片尺寸、通过CSS规则实现所有Logo显示大小均匀一致的方案。

原有实现代码如下：

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

原有代码的问题是只限制了外层容器的宽度，没有统一高度约束，宽高比不同的Logo撑满容器宽度时，实际视觉占比差异很大。
核心只需要用到object-fit: contain这一个CSS属性即可实现需求：给外层Logo容器设置统一的宽高后，给图片加上该属性，图片会在不拉伸变形、不裁剪内容的前提下，自动等比缩放至完整适配容器尺寸，所有Logo的视觉大小会保持均匀，不需要逐个调整单张图片的尺寸。

仅需要调整CSS部分规则，HTML结构无需改动：

.logos-container{
    background: #ddd;
}
.logos-container .client-logo{
    width: 120px;
    /* 统一设置容器高度，可根据实际展示需求调整数值 */
    height: 60px;
    /* 让容器内的Logo自动居中，避免留白导致的位置偏移 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.logos-container .client-logo img{
    /* 限制图片最大尺寸不超出容器范围 */
    max-width: 100%;
    max-height: 100%;
    /* 核心属性：自动等比缩放适配容器，保证图片不变形、不被裁剪 */
    object-fit: contain;
}

提示：如果需要让Logo完全填满容器、允许边缘裁剪，可以把object-fit的属性值改为cover，多数Logo展示场景用contain即可满足需求。

内容的提问来源于stack exchange，提问作者Shayan Kanwal