直接在.col内部使用时，IGM-fluid无法缩放png

Question

我在Bootstrap 4.1.3中使用以下代码，并且我的图像未按比例缩放到该行的高度。谁能告诉我我在哪里错了。

<div class="container">
    <div class="row top-logo">
        <div class="col text-center"><img src="logo.png" class="img-fluid"></div>
    </div>
</div>

css是：

.top-logo {
height: 200px;
}

我的徽标图片是100x100 png。

Answer 1

我不是CSS专家，所以如果不能给您最好的解释，对不起。 img-fluid 后面具有 height：auto 属性，但由于某种原因它不起作用。但是，高度：100％可以解决问题。 Bootstrap具有 h-100 类来执行此操作。尝试将其添加到图像类中。

<img src="logo.png" class="img-fluid h-100">

Answer 2

.img-流体的高度为“自动” 。对于按高度缩放的img：自动，应为img设置宽度

.top-logo img{
  height: auto;
  width:100%;
  max-width:200px;
}

或

.top-logo img{
  height: 100%;
  width:auto;
  /*max-width:200px;*/
}