Img-fluid 不会在 Bootstrap 4 中调整图像大小答案

【问题标题】：Img-fluid doesn't resize the image in Bootstrap 4Img-fluid 不会在 Bootstrap 4 中调整图像大小
【发布时间】：2020-11-25 03:55:21
【问题描述】：

很简单的问题。我有一个带有图像品牌的导航栏，并且我正在使用 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;在样式属性中，什么都不做。帮忙？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案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

【讨论】：