仅用HTML和CSS实现：以图片自然宽度限制相册容器宽度

核心思路 #

让页面主容器的宽度由图片的实际显示宽度决定，同时强制详情文本容器的宽度不超过图片宽度，避免撑开主容器导致错位。利用CSS的fit-content和width: 100%实现这一效果，无需JavaScript干预。

语义化HTML结构 #

使用<figure>包裹图片和详情内容，既符合语义规范，也便于样式控制：

<main>
  <figure class="photo-item">
    <img src="your-photo.jpg" alt="照片描述">
    <figcaption class="photo-details">
      <p class="description">这是照片的描述内容</p>
      <div class="metadata">
        <span class="camera">相机：Canon EOS R5</span>
        <span class="date">日期：2024-05-20</span>
        <span class="focal">焦距：50mm</span>
        <span class="exposure">曝光：1/125s</span>
      </div>
    </figcaption>
  </figure>

  <!-- 可添加更多照片项 -->
  <figure class="photo-item">
    <img src="vertical-photo.jpg" alt="竖版照片">
    <figcaption class="photo-details">
      <p class="description">竖版照片的描述，内容可以稍长，测试是否会撑开容器</p>
      <div class="metadata">
        <span class="camera">相机：Sony A7 IV</span>
        <span class="date">日期：2024-06-10</span>
        <span class="focal">焦距：35mm</span>
        <span class="exposure">曝光：1/200s</span>
      </div>
    </figcaption>
  </figure>
</main>

CSS样式实现 #

/* 主容器：宽度由内部最宽元素（图片）决定，居中显示 */
main {
  max-width: fit-content;
  margin: 0 auto;
  padding: 20px;
}

/* 照片项：保持块级，内部元素自然流布局 */
.photo-item {
  margin: 0 0 40px 0;
  padding: 0;
}

/* 图片自适应：保持比例，最大宽度占满父容器 */
.photo-item img {
  max-width: 100%;
  height: auto;
  display: block; /* 去除图片下方默认间隙 */
}

/* 详情容器：宽度限制为父容器（即图片宽度），自动换行 */
.photo-details {
  width: 100%;
  margin-top: 12px;
}

/* 描述文本：默认样式，可自定义 */
.description {
  margin: 0 0 8px 0;
  font-size: 1rem;
  line-height: 1.5;
}

/* 参数标签：灵活布局，可换行 */
.metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  color: #666;
}

.metadata span {
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
}

效果说明 #

1. 大屏幕/横版图片：main的max-width: fit-content会自动匹配图片的实际宽度，photo-details设置width: 100%后，文本不会超出图片宽度，完美对齐。
2. 竖版图片：main宽度会跟随竖版图片的宽度，详情文本自动换行，不会撑开容器导致错位。
3. 小屏幕：图片通过max-width: 100%自动缩小，main也会同步缩小，保持布局一致。

这个方案完全依赖CSS特性，无需JavaScript计算宽度，同时保证了不同尺寸图片下的布局一致性。

内容的提问来源于stack exchange，提问作者fil maj