响应式横向滚动图片画廊开发求助：布局与适配问题

关键修改说明 #

• 移除图片固定宽高，改用宽高比约束+视口高度适配实现响应式缩放
• 调整画廊容器与图片容器的布局规则，避免标题干扰图片高度计算
• 适配Chrome/Safari的兼容性细节

修改后的完整代码 #

/* 基础样式重置 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
}

/* 横向滚动画廊容器 */
.scrolling-gallery {
  flex: 1; /* 占据剩余可用空间 */
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  gap: 0.5rem;
  padding-bottom: 1rem; /* 避免标题被滚动条遮挡 */
}

/* 图片+标题容器 */
.image-container {
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* 禁止容器被压缩 */
  align-items: center;
  width: fit-content;
}

/* 图片通用样式 */
.gallery-image {
  max-height: calc(100vh - 120px); /* 减去顶部标题和自身标题的高度，适配视口 */
  object-fit: contain; /* 保持图片完整比例 */
}

/* 单独设置不同图片的宽高比 */
.large-image {
  aspect-ratio: 1200/1200; /* 1:1 */
}

.medium-image {
  aspect-ratio: 850/1200; /* ~0.708:1 */
}

/* 标题样式 */
.image-container h2 {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  text-align: center;
  width: 100%;
}

<!DOCTYPE html>
<html>
<body>
  <h1>Horizontal Gallery</h1>

  <div class="scrolling-gallery">
    <div class="image-container">
      <img class="gallery-image large-image" src="https://temp-image-test.s3.us-east-2.amazonaws.com/distortion_matrix_1200_1200_blue.png" />
      <h2>Image 1</h2>
    </div>
    <div class="image-container">
      <img class="gallery-image medium-image" src="https://temp-image-test.s3.us-east-2.amazonaws.com/distortion_matrix_850_1200_red.png" />
      <h2>Image 2</h2>
    </div>
    <div class="image-container">
      <img class="gallery-image large-image" src="https://temp-image-test.s3.us-east-2.amazonaws.com/distortion_matrix_1200_1200_green.png" />
      <h2>Image 3</h2>
    </div>
  </div>
</body>
</html>

核心原理 #

1. 宽高比约束：通过aspect-ratio属性严格匹配图片原始比例，替代固定宽高，确保缩放时比例不变
2. 视口高度适配：用max-height: calc(100vh - 120px)让图片自动占满视口剩余空间，同时预留标题和顶部元素的高度
3. Flex布局优化：flex-shrink: 0保证每个图片容器不会被横向压缩，align-items: center让标题居中对齐图片
4. 兼容性处理：object-fit: contain确保图片在缩放时完整显示，overflow-y: hidden避免画廊容器出现垂直滚动条

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