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标签的区域。

Answer 2

您在%中给出高度，请更改为px

.portfolio-img {
  width: 45%;
  height: 300px; /* ---> give height it as you want */
  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 3

w3school网站上有一个很好的例子

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

总而言之，您可以使用display flex并将图像分成几列

这是针对您的情况的结果

.container {
  display: flex;
  flex-wrap: wrap;
}
.row {
  flex: 50%;
  max-width: 50%;
}
.portfolio-img {
  width:100%;
  vertical-align: middle;
}

<div class="container">
  <div class="row">
    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">
    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">
  </div>
  <div class="row">
    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">
    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">
  </div>
</div>