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

在类的引导程序中使用图像而不是背景图像。

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

img-fluid将拉伸100％的宽度

在Bootstrap中更改图片的大小

1 个答案: