javascript - 在 Bootstrap 中更改图片的大小

Question

我正在为一个网站做一个作品集，这里是代码。我想让图片看起来更小，并且像示例中一样采用全宽。但我喜欢它们看起来更像一个正方形。我尝试使用高度进行操作，但它不会显示所有图片，它会裁剪图片，我不希望这些图片在变小时被裁剪。

提前致谢!

.cards{
  background-size: cover;
  background-position: center;
  padding-right: 5rem;
  padding-left: 5rem;
  padding-top: 135px;
  padding-bottom: 135px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<section class="container-fluid">
  <h1>Portfolio</h1>
  <div class="row">
   <div class="col-md-3 cards" style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/f51c/IMG_3397_2560x1600-web.jpg);"></div>
   <div class="col-md-3 cards " style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/469a/pesseguinho-web.jpg);"></div>
   <div class="col-md-3 cards" style="background-image: url(https://xubuntu.org/wpcontent/uploads/2018/04/8fbb/40103442821_db033c72a4_o-web.jpg);"></div>
   <div class="col-md-3 cards" style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/3ed0/2017_07_21_23_33_13_03-web.jpg);"></div>
 </div>
 <div class="row">
  <div class="col-md-4 cards" style="background-image: url(https://xubuntu.org/wpcontent/uploads/2018/04/e68e/Winter_Wonderland_by_Sarah_Muenz-web.jpg);"></div>
  <div class="col-md-4 cards" style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/c099/EastHarbourSunrise-web.jpg);"></div>
  <div class="col-md-4 cards" style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/f51c/IMG_3397_2560x1600-web.jpg);"></div>
 </div>
</section>

Answer 1

在 Bootstrap 中使用类的图像而不是背景图像。

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

img-fluid 将拉伸(stretch) 100% 的宽度