图片排列js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片排列示例</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .item {
    flex: 1 1 calc(25% - 10px); /* 每行显示4张图片 */
    box-sizing: border-box;
  }
  .item img {
    width: 100%;
    height: auto;
    display: block;
  }
</style>
</head>
<body>

<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>

</body>
</html>

.item img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 或contain，根据需求选择 */
}