html显示多张图片

基本布局方法

使用<img>标签直接排列

通过多个<img>标签并排放置,配合CSS控制样式。

示例代码：

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

CSS样式：

.image-container {
  display: flex; / 使用Flex布局横向排列 /
  gap: 10px;    / 图片间距 /
}
.image-container img {
  width: 150px; / 固定宽度 /
  height: auto; / 等比缩放 /
}

使用<ul>列表包裹图片

通过无序列表结合CSS实现多图布局。

示例代码：

<ul class="image-list">
  <li><img src="image1.jpg" alt="图片1"></li>
  <li><img src="image2.jpg" alt="图片2"></li>
  <li><img src="image3.jpg" alt="图片3"></li>
</ul>

CSS样式：

.image-list {
  list-style: none; / 去除列表符号 /
  padding: 0;       / 清除默认内边距 /
  display: flex;
  justify-content: space-between; / 两端对齐 /
}
.image-list li {
  flex: 1;          / 均分宽度 /
  text-align: center; / 图片居中 /
}

表格布局（不推荐，仅兼容旧浏览器）

适用场景：需固定位置或复杂排版

示例代码：

<table class="image-table">
  <tr>
    <td><img src="image1.jpg" alt="图片1"></td>
    <td><img src="image2.jpg" alt="图片2"></td>
    <td><img src="image3.jpg" alt="图片3"></td>
  </tr>
</table>

CSS样式：

.image-table {
  border-collapse: collapse; / 合并表格边框 /
  width: 100%;              / 自适应容器宽度 /
}
.image-table td {
  padding: 5px;             / 单元格内边距 /
  text-align: center;       / 图片居中 /
}

响应式多图布局（推荐）

使用Grid布局自动换行

示例代码：

<div class="responsive-grid">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
  <img src="image3.jpg" alt="图片3">
  <img src="image4.jpg" alt="图片4">
</div>

CSS样式：

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); / 自动填充列 /
  gap: 15px; / 列间距 /
}
.responsive-grid img {
  width: 100%; / 填满单元格 /
}

图片画廊效果（带标题和描述）

结合<figure>和<figcaption>

示例代码：

<div class="gallery">
  <figure>
    <img src="image1.jpg" alt="风景图">
    <figcaption>美丽的山川</figcaption>
  </figure>
  <figure>
    <img src="image2.jpg" alt="城市夜景">
    <figcaption>繁华都市</figcaption>
  </figure>
</div>

CSS样式：

.gallery {
  display: flex;
  flex-wrap: wrap; / 允许换行 /
  gap: 20px;
}
.gallery figure {
  width: calc(33.333% 20px); / 三列布局 /
  text-align: center;
}
.gallery img {
  max-width: 100%; / 自适应宽度 /
}

常见问题与解答

问题1：如何调整图片间距？

• 答案：可通过以下方式调整：
  1. 使用gap属性（Flex/Grid布局）。
  2. 设置margin或padding（如img { margin: 5px; }）。
  3. 在容器中使用justify-content或gap控制整体间距。

问题2：如何实现图片懒加载？

• 答案：使用loading="lazy"属性（现代浏览器支持）：

  <img src="image.jpg" alt="图片" loading="lazy">

  或通过JavaScript