Html 照片库 - 删除空间

Question

我有一个 HTML/CSS 格式的照片库，两张照片之间有一个空格。我希望空间像照片中那样(左)

.portfolio-img {
  width: 45%;
  height: 100%;
  margin-top: 2rem;
  margin-left: 1rem;
}

<div class="container">
  <div class="row">


    <img src="images/img3.jpg" class="portfolio-img">
    <img src="images/img1.jpg" class="portfolio-img">
    <img src="images/img2.jpg" class="portfolio-img">
    <img src="images/img4.jpg" class="portfolio-img">

  </div>
</div>

Answer 1

你可以使用

.porfolio-img {
    width: 45%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

background-size: cover 将确保源图像覆盖 img 标签的区域。