在Bootstrap中设置相同大小的图像

Question

我正在使用Bootstrap 4插入多个图像，我认为我已经正确使用了Bootstrap的网格系统，但截至目前，由于图像中显示的图像大小不均匀，它看起来非常难看。为了让图片看起来更具吸引力和独特性，我需要做些什么？我是否可以处理它的宽度和高度，还是有其他任何方式可以使图像均匀对齐并且尺寸相同？

HTML：

<div class="container" id="Products">
    <h1> Our Products </h1>
<div class="row">
 <div class="col-lg-4 col-sm-6">
   <a href="#"> <img class="img-responsive" src="download3.jpg" /> </a>
   <a href="#"> <h1> Men's Wear </h1> </a>
 </div>
 <div class="col-lg-4 col-sm-6">
  <a href="#"> <img class="img-responsive" src="download4.jpg" /> </a>
   <a href="#"> <h1> Foot Wear </h1> </a>
 </div>
 <div class="col-lg-4 col-sm-6">
  <a href="#"> <img class="img-responsive" src="download2.jpg" /> </a>
  <a href="#"> <h1> Party Dresses </h1> </a>
 </div>
</div>
<div class="row">
 <div class="col-lg-4 col-sm-6">
   <a href="#"> <img class="img-responsive" src="images/i1.jpg" /> </a>
   <a href="#"> <h1> Men's Wear </h1> </a>
 </div>
 <div class="col-lg-4 col-sm-6">
  <a href="#"> <img class="img-responsive" src="images/i2.jpg" /> </a>
   <a href="#"> <h1> Foot Wear </h1> </a>
 </div>
 <div class="col-lg-4 col-sm-6">
  <a href="#"> <img class="img-responsive" src="images/i3.jpg" /> </a>
  <a href="#"> <h1> Party Dresses </h1> </a>
 </div>
</div>
<div class="row">
 <div class="col-lg-4 col-sm-6">
   <a href="#"> <img class="img-responsive" src="images/i4.jpg" /> </a>
   <a href="#"> <h1> Men's Wear </h1> </a>
 </div>
 <div class="col-lg-4 col-sm-6">
  <a href="#"> <img class="img-responsive" src="images/i5.jpg" /> </a>
   <a href="#"> <h1> Foot Wear </h1> </a>
 </div>
 <div class="col-lg-4 col-sm-6">
  <a href="#"> <img class="img-responsive" src="images/i6.jpg" /> </a>
  <a href="#"> <h1> Party Dresses </h1> </a>
 </div>
</div>
<div class="row">
 <div class="col-lg-4 col-sm-6">
   <a href="#"> <img class="img-responsive" src="images/i7.jpg" /> </a>
   <a href="#"> <h1> Men's Wear </h1> </a>
 </div>
 <div class="col-lg-4 col-sm-6">
  <a href="#"> <img class="img-responsive" src="images/i8.jpg" /> </a>
   <a href="#"> <h1> Foot Wear </h1> </a>
 </div>
 <div class="col-lg-4 col-sm-6">
  <a href="#"> <img class="img-responsive" src="images/i9.jpg" /> </a>
  <a href="#"> <h1> Party Dresses </h1> </a>
 </div>
</div>
<hr>

CSS：

img .img-responsive
{
     height:250px;
    width:100%;
}
.container
{
    width: 80%;
    margin: 0 auto;
}

.container::after {
  content: '';
  display: table;
  clear: both;
}

] 3

Answer 1

在Bootstrap 4中不再使用img-responsive类。使用类img-fluid代替使图像尊重列宽。

<img src="..." class="img-fluid" alt="Responsive image">

See here

Answer 2

 <div class="col-lg-4 col-sm-6">
  <a href="#"> <div class='box'><img class="img-fluid" src="images/i6.jpg" /></div></a>
  <a href="#"> <h1> Party Dresses </h1> </a>
 </div>

只需放入div并给出具有固定大小的css

.box{
  height:250px;
    width:300px;
    overflow:hidden;
}