解决摄影作品集网站div列底部空白布局问题

针对你遇到的column底部空白、图片被强制裁剪的问题，可尝试以下不裁剪图片的调整方案：

核心调整方向 #

从消除默认间距、修正flex对齐逻辑、保证图片比例自适应三个维度入手：

1. 清除图片默认间距 #

图片默认是行内元素，会因基线对齐产生底部空白，直接设置为块级元素并清除内外边距：

.column img {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto; /* 保持图片原比例自适应缩放 */
}

2. 修正Flex容器对齐逻辑 #

父容器.row默认的align-items: stretch会强制拉伸子元素.column，导致其高度超出图片实际高度，改为顶部对齐让column高度自适应内容：

.row {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* 可选：统一设置column间的间距，替代单独margin */
}

如果仅需特定column自适应，也可单独给目标column设置：

.column {
  align-self: flex-start;
}

3. 确保Picture元素自适应 #

让picture完全包裹图片，避免额外尺寸溢出：

.column picture {
  display: block;
  width: 100%;
}

4. 实现图片完整无裁剪显示 #

若需要图片完整展示且不拉伸变形，可结合object-fit: contain（会保留原比例，空白区域可用背景色填充）：

.column img {
  object-fit: contain;
  background-color: #f5f5f5; /* 填充图片比例外的空白区域，可自定义颜色 */
}

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