使用Wrapper为响应式图片画廊添加同宽图片标题

要实现每张图片的标题宽度与动态变化的图片一致，核心是让图片和标题共享同一个父容器，利用CSS布局让容器宽度自动匹配图片宽度，同时保持整体画廊的横向排列。以下是修改后的实现：

修改后的HTML结构 #

<div class="row">
  <div class="item">
    <a href="http://placekitten.com/500/600">
      <img class="pic" src="http://placekitten.com/500/600" />
    </a>
    <div class="caption">标题1</div>
  </div>
  <div class="item">
    <a href="http://placekitten.com/300/600">
      <img class="pic" src="http://placekitten.com/300/600" />
    </a>
    <div class="caption">标题2</div>
  </div>
  <div class="item">
    <a href="http://placekitten.com/400/600">
      <img class="pic" src="http://placekitten.com/400/600" />
    </a>
    <div class="caption">标题3</div>
  </div>
</div>

修改后的CSS代码 #

.row {
  width: 100%;
  aspect-ratio: 11 / 2;
  display: flex; /* 用flex替代float实现横向排列 */
  gap: 1%; /* 替代margin，控制图片间的间距 */
  border: solid purple;
}

.item {
  flex: 0 0 auto; /* 不拉伸不收缩，宽度由内部图片决定 */
  display: flex;
  flex-direction: column; /* 图片和标题垂直排列 */
  height: 100%;
}

.pic {
  height: 90%; /* 保持原有图片高度比例 */
  width: 100%; /* 图片填满父容器宽度 */
  border: solid red;
  object-fit: cover; /* 可选：保持图片比例，防止拉伸变形 */
}

.caption {
  font-size: 10pt;
  width: 100%; /* 标题宽度继承父容器，与图片一致 */
  border: solid blue;
  text-align: center; /* 可选：标题居中显示 */
  margin-top: auto; /* 可选：让标题自动靠下对齐 */
}

关键调整说明 #

• 父容器绑定：每个图片与对应标题包裹在.item容器内，确保两者宽度始终同步。
• Flex替代Float：.row使用display: flex实现横向排列，相比float更易控制对齐逻辑，且能自适应不同屏幕尺寸。
• 图片自适应宽度：.pic设置width: 100%填满父容器，.caption自动继承容器宽度，自然与图片保持一致。
• 间距优化：用.row的gap属性统一控制元素间距，比单独设置margin更简洁可控。

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