【CSS】图片比例完整展示与滚动查看

在前端开发中，如何高效地展示多张图片，并确保图片保持原始比例，同时兼顾滚动查看的需求，是一个常见的问题。本文将通过一个实际案例，讲解如何解决 100vh 固定高度导致图片被压缩的问题，以及如何改进页面布局让滚动与展示兼顾。

---

一、问题背景

在页面中，从上到下排列多张图片是一个常见需求，比如产品图片展示、图片墙设计等。为了实现这一功能，开发者可能会采用 height: 100vh 的方式设置容器高度，希望让容器占满屏幕。然而，这种方法会导致以下问题：

1. 图片高度被压缩：100vh 固定了容器高度，当内容超出时，图片会因为容器的限制而被压缩，比例失真。
2. 滚动条缺失：100vh 强制限制了容器高度，内容溢出时滚动条不会出现，导致用户无法查看完整内容。

为了解决这个问题，尝试将高度改为固定像素值（如 1500px）。改动后，图片显示比例恢复正常，滚动条也出现了，但这显然不是最佳解决方案。

---

二、问题分析

为什么 100vh 会压缩图片高度？

100vh 表示容器高度等于视口高度（屏幕的可见区域）。当容器内容高度超过视口时，容器内部元素会被强行压缩，以适应 100vh 的限制。图片作为子元素，会跟随容器被压缩，从而导致比例失真。

为什么固定像素高度有效？

当高度改为固定像素值（如 1500px）时，容器不再受视口高度限制，内容高度可以根据需要延展。此时，图片按照比例正常显示，滚动条也会随着内容溢出而出现。

---

三、解决方案与改进

既然固定像素高度能够解决问题，但不够灵活，那么我们需要一个更通用的方案：在保留滚动条的基础上，让容器高度根据内容自动适配，同时确保图片显示比例正常。

1. 页面布局代码

以下是基于 Taro 的布局代码：

import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';

import './index.scss';

function Index() {
  const imgList = [
    require('path/to/image1.png'),
    require('path/to/image2.png'),
    require('path/to/image3.png'),
  ];

  return (
    <View id="index">
      {imgList.map((img, index) => (
        <Image key={index} src={img} mode="aspectFill" className="img-list" />
      ))}
    </View>
  );
}

export default Index;

---

2. 样式代码

核心样式如下：

#index {
  width: 100vw;
  height: 1500px; // 固定容器高度为 1500px
  display: flex;
  flex-direction: column; /* 从上到下排列图片 */
  justify-content: flex-start; /* 从顶部开始布局 */
  align-items: center; /* 图片居中对齐 */
  overflow-y: auto; /* 启用垂直滚动 */
  .img-list {
    margin-bottom: 5px; /* 图片之间的间距 */
    max-width: 500px; /* 限制图片最大宽度 */
    width: 80%; /* 图片宽度为父容器的 80% */
    height: 100px; /* 固定高度 */
    object-fit: contain; /* 确保图片按比例缩放，完整显示 */
  }
}

---

3. 核心点解读

容器高度

• 使用 height: 1500px; 固定容器高度。你已经发现这个值可以让滚动条正常显示且图片高度正常展示。
• 如果图片数量动态变化，可以根据内容高度设置更灵活的高度值（例如 min-height 或动态计算值）。

图片样式

• max-width: 500px：限制图片最大宽度，避免在大屏设备上图片过大。
• width: 80%：让图片宽度相对于容器自适应，适配不同屏幕。
• height: 100px：固定图片高度，同时搭配 object-fit: contain 保证图片完整显示。

滚动支持

• overflow-y: auto 确保内容溢出时，滚动条会出现，用户可以上下滑动查看所有图片。

推荐：

• JavaScript
• react
• vue

---