设置figure内图片宽高并保留比例，如何让caption紧贴图片底部？

问题出在你给img设置了固定的height属性——当max-width触发让图片宽度缩小时，img的高度仍维持设定值，object-fit:contain产生的留白是在img元素内部，figcaption跟着img元素的底部走，自然就和实际图片拉开了距离。

可以通过给img加一个容器来解决，用容器控制宽高比例和最大宽度，让img在容器内自适应显示，这样figcaption就能紧贴容器（也就是实际图片的底部）：

代码示例 #

HTML

<figure>
  <div class="img-wrapper">
    <img src="image.jpg" />
  </div>
  <figcaption>Caption</figcaption>
</figure>

CSS

/* 基础样式保留你的max-width设置 */
img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 容器控制初始尺寸和宽高比 */
.img-wrapper {
  width: 100px;   /* 你想要的初始宽度 */
  height: 200px;  /* 你想要的初始高度 */
  max-width: 100%;
  aspect-ratio: 100/200; /* 和初始宽高一致，确保缩放时比例不变 */
}

原理说明 #

• 容器img-wrapper负责维持你需要的宽高比，同时通过max-width:100%保证在窄屏幕上自动缩小；
• img设置width:100%和height:100%占满容器，配合object-fit:contain按比例显示图片；
• figcaption紧跟在容器下方，自然就紧贴实际图片的底部，不会被img内部的留白隔开。

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