用HTML/CSS模拟书架：如何保留书本尺寸并实现底部对齐？

算力阿峰

2026-5-8

解决书架布局中书本尺寸被统一缩放的问题

你的问题核心在于Flex容器的默认对齐行为——默认的align-items: stretch会强制所有子元素（.image-inner）的高度和容器保持一致，导致所有图片被拉伸/缩放到相同高度，丢失了各自的尺寸差异。下面是具体的解决思路和代码修改：

核心修改思路

调整Flex对齐规则：把容器的align-items设置为flex-end，让所有书本底部对齐，这样每个书本的高度由自身图片的实际尺寸决定，而非被强制拉伸到容器高度。
保留图片宽高比：确保图片宽度随高度自动适配，避免被强制变形。
可选优化：添加书本间距、防止书本被挤压变窄，让书架效果更贴近真实场景。

修改后的代码

CSS部分

.images-outer {
  height: 50%;
  max-height: 50%;
  display: flex;
  align-items: flex-end; /* 关键：底部对齐，取消强制拉伸 */
  gap: 10px; /* 书本之间的间距，可根据需求调整 */
}

.image-inner {
  flex-shrink: 0; /* 防止书本在容器空间不足时被挤压变窄 */
}

.image-inner img {
  max-height: 100%; /* 图片最大高度不超过容器的50% */
  width: auto; /* 宽度自动适配，保留原始宽高比 */
  display: block; /* 移除图片默认的inline元素间隙 */
}

HTML部分（无需修改，保持原结构即可）

<div class="images-outer"> 
  <div class="image-inner"> 
    <img src="img/_0002_aristotle__poetics_and_rhetoric.png"> 
  </div> 
  <div class="image-inner"> 
    <img src="img/_0005_david_mamet__make_believe_town.png"> 
  </div> 
  <div class="image-inner"> 
    <img src="img/_0003_david_mamet__bambi_vs_godzilla.png"> 
  </div> 
  <div class="image-inner"> 
    <img src="img/_0006_annie_dillard__pilgrim_at_tinker_creek.png "> 
  </div> 
</div>