Img-fluid не изменяет размер изображения в Bootstrap 4

Question

довольно простая задача. У меня есть панель навигации с брендом изображения, и я использую img-fluid, поэтому он просто изменит размер, чтобы соответствовать div, вместо того, чтобы указывать высоту и ширину. Таким образом, он будет отзывчивым. Проблема в том, что он вообще не меняет размер, а просто растягивает панель навигации и становится огромной.

<nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">
          <img src="assets/images/urbane-sleek.png" class="img-fluid"  alt="">
        </a>
      </nav>

    <div class="row">
        <div class="col-md-2 .d-xs-none .d-sm-none">Text...</div>
        <div class="col-md-10">Text...</div>
        
    </div>

Я пробовал установить max-width: 100% и height: auto; в атрибуте стиля и ничего не делает. Помогите?

Answer 1

Вам все равно нужно указать размер изображения, img-fluid просто делает его отзывчивым, но сохраняет исходный размер изображения. Либо установите размер в самом теге изображения:

<img src="assets/images/urbane-sleek.svg" class="img-fluid" height="100" width="100" id="exampleImage"alt="">

, либо добавьте правило css:

<img src="assets/images/urbane-sleek.svg" class="img-fluid" id="exampleImage" alt="">

#exampleImage {
  min-width: 10px;
  max-height: 200px;
  min-width: 10px;
}

JsFiddle