如何始终以全宽显示多张图片

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

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image-container img {
  width: 100%;
  height: auto;
}

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

.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.image-container img {
  width: 100%;
  height: auto;
}

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

// 使用Masonry库
var container = document.querySelector('.image-container');
var masonry = new Masonry(container, {
  itemSelector: 'img',
  columnWidth: 300,
  gutter: 10
});