Img-жидкость не масштабирует png при использовании непосредственно внутри .col

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

.img-liquid высота "авто" . для масштаба img по высоте: авто вы должны установить width для img

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

или

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

Answer 2

Я не эксперт по CSS, поэтому мне жаль, если я не могу дать вам лучшее объяснение. img-Fluid имеет свойство height: auto , но оно почему-то не работает. Тем не менее, высота: 100% делает свое дело. Bootstrap имеет класс h-100 для этого. Попробуйте добавить это в свой класс изображений.

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