0

根据维基百科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 不能与下面的文字和内容重叠，并且不能超过横幅 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;
  }
4

1 回答 1

0

似乎一个简单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>

于 2021-07-10T20:44:19.267 回答