保留垂直滚动，维持主图3:2宽高比的技术实现问询

当然可以实现！你的核心需求是让主图（大象）牢牢维持3:2的宽高比，同时让缩略图区域在内容超出时自然出现垂直滚动条，而不是通过压缩主图来消除滚动条。下面是具体的实现方案：

核心思路 #

1. 强制主图的宽高比：利用CSS的aspect-ratio属性（或兼容旧浏览器的padding-top技巧）固定主图容器的3:2比例，确保其高度始终随宽度按比例变化。
2. 让缩略图区域独立滚动：不对缩略图容器设置强制高度或压缩规则，而是通过overflow-y: auto让它在内容超出时自动显示垂直滚动条，避免挤压主图空间。

具体实现代码 #

HTML结构

<div class="page-wrapper">
  <!-- 主图容器 -->
  <div class="hero-image-container">
    <img src="elephant.jpg" alt="大象主图">
  </div>
  
  <!-- 缩略图容器 -->
  <div class="thumbnails-container">
    <div class="thumbnail-item">缩略图1</div>
    <div class="thumbnail-item">缩略图2</div>
    <div class="thumbnail-item">缩略图3</div>
    <div class="thumbnail-item">缩略图4</div>
    <!-- 更多缩略图... -->
  </div>
</div>

CSS样式

/* 页面整体布局：垂直排列主图和缩略图 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
  box-sizing: border-box;
  min-height: 100vh; /* 可选，让页面占满视口高度 */
}

/* 核心：强制主图容器保持3:2宽高比 */
.hero-image-container {
  aspect-ratio: 3/2;
  width: 100%;
  background-color: #f0f0f0; /* 图片加载前的占位背景 */
}

/* 确保图片适配容器比例，不变形 */
.hero-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪多余部分，保持图片比例；若要完整显示用contain */
  object-position: center; /* 图片居中显示 */
}

/* 缩略图容器：内容超出时自动滚动 */
.thumbnails-container {
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap; /* 缩略图横向排列，可根据需求改为垂直 */
  gap: 0.8rem;
  /* 不设置固定高度，让内容决定容器高度，超出则滚动 */
}

/* 缩略图样式示例 */
.thumbnail-item {
  width: 120px;
  height: 90px;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

关键细节说明 #

• aspect-ratio: 3/2：这是现代浏览器原生支持的属性，直接指定容器的宽高比，容器高度会自动根据宽度计算，完全不需要手动维护比例关系。
• overflow-y: auto：缩略图容器仅在内容高度超过当前可用空间时才显示滚动条，不会强制压缩自身或主图的空间。
• object-fit: cover：保证图片在容器内按比例显示，不会被拉伸变形，若需要完整显示图片可替换为object-fit: contain。

兼容旧浏览器方案（可选） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding-top的技巧模拟比例：

.hero-image-container {
  width: 100%;
  position: relative;
  padding-top: calc(2/3 * 100%); /* 3:2比例，高度=宽度*2/3 */
}

.hero-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这样设置后，无论你怎么缩小浏览器窗口，主图都会严格保持3:2的宽高比，缩略图区域则会在内容过多时自然出现垂直滚动条，完全符合你的需求。

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