如何实现方形容器内图片最大化并消除横图与标题间距？

核心问题分析 #

当前问题源于.image-wrapper强制设置了aspect-ratio: 1/1，导致横图在正方形容器内上下产生空白，再加上figure的gap间距，使得图片与标题之间的距离过大。我们需要在保持图片最大化显示效果的前提下，让标题紧贴图片底部。

方案一：利用绝对定位嵌入标题（无需调整HTML层级） #

通过将标题绝对定位到图片容器内，直接紧贴图片底部，同时保留正方形容器的显示限制：

修改后的CSS代码

figure {
  display: flex;
  flex-direction: column;
}

.image-wrapper {
  aspect-ratio: 1/1;
  position: relative; /* 为标题定位提供基准 */
  display: flex;
  justify-content: center;
  align-items: center; /* 确保图片在正方形容器内居中 */
  overflow: hidden;
}

.image-wrapper a {
  display: block;
  width: 100%;
  height: 100%;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 自动适配：横图贴左右，竖图贴上下 */
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: hsl(var(--color-secondary));
  font-size: var(--fs--1);
  padding: 0.2rem 0; /* 可选：提升标题可读性 */
  background-color: rgba(255, 255, 255, 0.8); /* 可选：避免标题与图片内容重叠 */
}

/* 移除原有的.landscape和.portrait类样式，object-fit已实现所需效果 */

方案二：容器自适应图片尺寸（保留原有标题位置） #

利用已有的.landscape/.portrait类，让图片容器自适应图片实际尺寸，同时保持1:1的显示限制，缩小图片与标题的间距：

修改后的CSS代码

figure {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 缩小间距，可按需调整 */
  align-items: center; /* 让图片和标题居中对齐 */
}

.image-wrapper {
  width: 100%;
}

/* 横图处理：容器宽度100%，高度不超过宽度（保持1:1限制），图片铺满宽度 */
figure.landscape .image-wrapper {
  max-height: 100%;
}

figure.landscape img {
  display: block;
  width: 100%;
  height: auto;
}

/* 竖图处理：容器高度100%，宽度不超过高度（保持1:1限制），图片铺满高度 */
figure.portrait .image-wrapper {
  height: 100%;
}

figure.portrait img {
  display: block;
  width: auto;
  height: 100%;
}

figcaption {
  text-align: center;
  color: hsl(var(--color-secondary));
  font-size: var(--fs--1);
  width: 100%; /* 确保标题宽度与图片一致 */
}

效果说明 #

两种方案均能满足需求：

• 横图左右紧贴容器边缘，竖图上下紧贴容器边缘
• 标题紧贴图片底部，消除了不必要的空白间距
• 保持图片最大化显示的核心要求

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