Bootstrap 高度和宽度属性无法正常工作答案

【问题标题】：Bootstrap height and width attribute does not work properlyBootstrap 高度和宽度属性无法正常工作
【发布时间】：2017-09-12 17:15:32
【问题描述】：

我设计了三张引导卡，其中包括一张图片和下方的说明。因为我想显示它们的大小相似，所以我添加了图像的 img 宽度和高度属性。但是由于一个错误，这个高度和宽度属性不能正常工作。三幅图像以三种不同的尺寸显示。我已经生成了下面的代码。

谁能弄清楚这里的错误是什么？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="img/sigiriya.jpg" class="img-fluid" height="500px" width="500px" alt="">
        <a>
          <div class="mask"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card with waves effect</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#!" class="btn btn-indigo">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img class="img-fluid" src="img/nuwara_eliya.jpg" alt="Card image cap" height="500px" width="500px">
        <a>
          <div class="mask"></div>
        </a>
      </div>


      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Classic card</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#!" class="btn btn-primary">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="img/ella.jpg" class="img-fluid" height="500px" width="500px" alt="">
        <a>
          <div class="mask"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card with waves effect</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#!" class="btn btn-pink">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

【问题讨论】：

如果添加固定宽度需要移除 img-fluid 类，您可以在v4-alpha.getbootstrap.com/content/images/#responsive-images阅读更多关于响应式图像的信息
@Troyer 我已经添加了 img-fluid 类，但是三个图像有 3 种不同的大小

标签： html css

【解决方案1】：

您可以使用此代码。它工作正常。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="b.png" height="500" width="500" alt="">
        <a>
          <div class="mask"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card with waves effect</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#!" class="btn btn-indigo">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="profile.jpg" alt="Card image cap" height="500" width="500">
        <a>
          <div class="mask"></div>
        </a>
      </div>


      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Classic card</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#!" class="btn btn-primary">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay hm-white-slight">
        <img src="profile.jpg" height="500" width="500" alt="">
        <a>
          <div class="mask"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card with waves effect</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#!" class="btn btn-pink">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

【讨论】：

您可以指出您所做的编辑以便更好地查看。

【解决方案2】：

通过删除 class="img-fluid" 属性，我们可以根据自己的喜好调整图像

【讨论】：

【解决方案3】：

img-fluid 类可用于 bootstrap v4，但您包括 CDN v3
img-fluid 只应用 max-with: 100%;高度：自动；所以它与html属性的宽度和高度不冲突。也许其他样式适用于它们，您可以用户浏览器调试以找到适用于您的图像的样式。
您应该使用 CSS 的宽度和高度来确保它没有其他样式可以覆盖它。

【讨论】：