CSS 如何在 3:1 矩形 div 中适应不同纵横比和不同大小的图像？

如何解决CSS 如何在 3:1 矩形 div 中适应不同纵横比和不同大小的图像？

根据维基百科https://commons.wikimedia.org/wiki/File:Standard_web_banner_ad_sizes.svg

，横幅 div (className content-area-container) 是一个 3:1 的 300x100 尺寸的矩形

但是，它使用 vw 单位，因此它会随着网页视口的最大化或最小化而按比例增长和缩小

div 必须包含 1 个徽标图片。徽标图像具有各种尺寸和纵横比。大多数是长方形，有些是正方形，有些很宽或很高

我的问题是如何将图像徽标放置在 div 的中心、填充它并在不影响纵横比的情况下尽可能多地显示？

图片logo不能与下面的文字和内容重叠，不能超过banner div的最大高度，否则父div会溢出

我的 css 和 html 没有使图像徽标适合，而是仍然保持原始大小

<div className="content-area">
    <div className="content-area-container">
        <img className="logo" src={`${image_logo_url_path}`} alt="Boxart" />
    </div>
</div>

.content-area {
    left: 0;
    right: 0;
    height: 100%;
    z-index: 3;
  }


.content-area-container {
    padding: 18px 0 12px 4%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }

  .logo {
    display:flex;
    align-items: center;
    margin-right: 5px;
  }
  
  .logo img {
    object-fit: contain;
    height: 25px;
  }

解决方法

似乎包含空间中的简单 width:100% 可以解决问题。

.logo-container{
border:1px solid #ccc;
padding:10px;
}

.logo-container img{
width:100%;
height:auto;
}

<div class='logo-container'>
<img src='https://picsum.photos/2000/3000' />
</div>