Question

我设计了三张自举卡，其中包含一张图片和一张描述。由于我想在大小上显示它们，我在图像中添加了img width和height属性。但是由于一个bug，这个高度和宽度属性不能正常工作。三个图像以三种不同的尺寸显示。我已经制作了以下代码。

任何人都可以搞砸这里的错误吗？

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

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

Answer 3

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

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

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

3 个答案: