Bootstrap HTML：限制图片堆叠组在视口内完整显示

哥们，我完全懂你要的效果——把一组拼起来的“建筑”图片作为一个整体，等比例缩放到视口范围内，不让它超出屏幕，对吧？你现有的CSS只处理了容器的基础缩放，但没把所有图片的总高度作为整体比例来计算，所以没法达到预期效果，我给你两个靠谱的方案：

方案一：CSS + 预先计算宽高比（纯前端无JS） #

如果你的图片尺寸是固定的，先算出整体的宽高比：

• 确保所有图片的宽度一致（不然拼接会错位，用工具统一宽度就行）
• 把所有图片的高度加起来，得到总高度
• 整体宽高比 = 单图宽度 / 总高度

然后用以下代码：

<div class="building-container">
  <img src="底层图片.jpg" alt="建筑底层">
  <img src="中层图片.jpg" alt="建筑中层">
  <img src="顶层图片.jpg" alt="建筑顶层">
</div>

/* 先把页面默认边距清掉，让容器能居中 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

/* 核心容器：用预先计算的宽高比，限制最大高度为视口高度 */
.building-container {
  aspect-ratio: 800 / 2000; /* 替换成你自己的宽高比，比如单图宽800，总高2000 */
  max-height: 100vh;
  width: auto;
}

/* 让每张图片占满容器宽度，自动保持自身比例 */
.building-container img {
  width: 100%;
  height: auto;
  display: block; /* 去掉图片之间的默认间隙 */
}

这个方案的好处是纯CSS，不用JS，适合图片尺寸固定的场景。

方案二：JS动态计算宽高比（适配图片尺寸不固定的情况） #

如果你的图片可能动态变化，或者不想手动算比例，用JS自动计算整体的宽高比：

<div class="building-container">
  <img src="底层图片.jpg" alt="建筑底层">
  <img src="中层图片.jpg" alt="建筑中层">
  <img src="顶层图片.jpg" alt="建筑顶层">
</div>

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

.building-container {
  max-height: 100vh;
  width: auto;
}

.building-container img {
  width: 100%;
  height: auto;
  display: block;
}

// 等所有图片加载完成后再计算
window.addEventListener('load', () => {
  const container = document.querySelector('.building-container');
  const imgs = container.querySelectorAll('img');
  
  // 假设第一张图的宽度是统一宽度（如果不是，你可以先统一处理）
  const totalWidth = imgs[0].naturalWidth;
  let totalHeight = 0;
  
  // 累加所有图片的高度
  imgs.forEach(img => {
    totalHeight += img.naturalHeight;
  });
  
  // 设置容器的宽高比
  container.style.aspectRatio = `${totalWidth} / ${totalHeight}`;
});

这个方案会自动计算所有图片的总高度和统一宽度，动态设置容器的宽高比，不管图片怎么换，都能保证整体等比例适配视口。

为什么你原来的代码不行？ #

你原来的.building样式只给容器设置了max-width和max-height，但没有把所有图片的总高度作为一个整体的比例基准——每张图片会各自缩放，没法保证组合起来的总高度刚好在视口内。我们的核心思路是把所有图片当成一个整体，先算出这个整体的宽高比，再让这个整体适配视口，这样就能实现完美的等比例缩放了。

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