我设计了三张自举卡,其中包含一张图片和一张描述。由于我想在大小上显示它们,我在图像中添加了img width和height属性。但是由于一个bug,这个高度和宽度属性不能正常工作。三个图像以三种不同的尺寸显示。我已经制作了以下代码。
任何人都可以搞砸这里的错误吗?
<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;
答案 0 :(得分:0)
通过删除class =“img-fluid”属性,我们可以根据自己的喜好调整图像
答案 1 :(得分:0)
答案 2 :(得分:0)
您可以使用此代码。它工作正常。
<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>