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;
}

提琴手