html如何让图片左右铺满之后上下排列

要实现图片左右铺满之后上下排列的效果，你可以使用flexbox布局或者CSS网格布局来实现。下面是两种方法的示例代码：

使用flexbox布局：

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .item {
    flex-basis: calc(50% - 10px);
    margin-bottom: 20px;
  }
  
  .item img {
    width: 100%;
    height: auto;
  }
</style>

<div class="container">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="item">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="item">
    <img src="image4.jpg" alt="Image 4">
  </div>
</div>

使用CSS网格布局：

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
  
  .item img {
    width: 100%;
    height: auto;
  }
</style>

<div class="container">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="item">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="item">
    <img src="image4.jpg" alt="Image 4">
  </div>
</div>

以上两种方法都会将图片左右铺满，然后自动上下排列。你可以根据需要调整间距和样式。