Question

我想设置一个高度固定且徽标不超过其容器的徽标。

所以我尝试这样的事情：

.logo { height:120px; max-width: 100% }

但是徽标变形了。

.logo { height:120px; max-width: auto }

但是徽标大于其容器。

我的bootply：https://www.bootply.com/ogzCKm0Dc3#

在没有JS或不使用CSS背景图像的情况下是否可以实现类似的功能？

Answer 1

为容器提供最大宽度和高度，然后徽标将相对于容器具有高度和宽度。

Answer 2

将宽度设置为100％，并且不要放置任何高度或自动放置。然后，您可以根据需要更改其容器的宽度。

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

<div class="container">
  <div class="row">
    <div class="col-6 border">
      <div class="logo-container justify-content-center">
        <img class="logo img-fluid" src="http://res.cloudinary.com/demo/image/fetch/b_rgb:ffffff,c_pad/https://storage.gra1.cloud.ovh.net/v1/AUTH_a2570241543b4ca5b4b28bd67d11141a/hopeitup-data/company/cj80c2o9k00gi0lti6b4sulqf">
    </div>
  </div>
</div></div>


<div id="push"></div>

默认情况下，图像将采用您指定的特定宽度的最佳高度。

显示具有固定高度和自定义宽度的徽标

2 个答案: