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

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