嘿，我来帮你解决这个图片缩放的问题！先明确下咱们的核心需求：

• 容器是固定尺寸（比如70vh × 600px），里面多张图片横向并排
• 图片得按自己的原始比例缩放，只要宽度或高度碰到容器边界就停止放大
• 必须完整显示整张图片，容器支持横向滚动看全所有图
• 还要覆盖三个场景：
  • 图片没填满容器但比例不变
  • 图片拉伸到适配容器高度，但宽度不超界
  • 不管容器高度怎么调，都能达到预期效果

现有代码的问题在哪？ #

你当前的代码给图片加了min-height:80vh和max-height:80vh，但有两个关键漏洞：

1. 没有给外层容器明确设置固定尺寸，图片找不到准确的边界参考
2. 缺少对图片宽度的精准约束，导致图片要么被强制拉伸，要么没法适配容器的宽高边界

修正后的完整代码 #

我调整了CSS的容器约束和图片缩放规则，让图片能精准适配容器边界，同时保持比例：

CSS 代码 #

/* 外层容器：明确固定尺寸 */
article.product {
    display: flex;
    flex-direction: column;
    border: 10px solid rgba(230, 230, 230, 1);
    margin-bottom: 10px;
    /* 这里是你要的固定尺寸：70vh高度 + 600px宽度 */
    height: 70vh;
    width: 600px;
}

/* 横向滚动的图片容器：占满外层容器的空间 */
article.product > section.gallery {
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    gap: 0; /* 去掉图片间的默认间距，可选 */
}

/* 图片的核心缩放规则 */
article.product > section.gallery > img {
    object-fit: contain; /* 强制按比例缩放，完整显示 */
    object-position: center; /* 图片居中显示 */
    border: 10px solid red;
    /* 关键：计算图片的最大可缩放尺寸，扣除容器和图片的边框 */
    max-height: calc(70vh - 40px); /* 70vh容器高度 - 容器10px*2边框 - 图片10px*2边框 */
    max-width: calc(600px - 40px); /* 600px容器宽度 - 容器10px*2边框 - 图片10px*2边框 */
    min-height: auto; /* 去掉原来的min-height，避免强制拉伸 */
    /* 可选：给图片设置最小尺寸，防止缩得太小 */
    min-width: 100px;
    min-height: 100px;
}

HTML 代码（保持不变） #

<article class="product">
    <section class="gallery">
        <img src="https://image-us.samsung.com/SamsungUS/mobile/phones/06102019-new/First_S10e_Lockup1_Black_gallery.jpg?$product-details-jpg$"/>
        <img src="https://corporate.bestbuy.com/wp-content/uploads/2018/02/STAR_blog_v01.jpg"/>
        <img src="https://i.insider.com/5c80383026289813a2172e82?width=1100&format=jpeg&auto=webp"/>
    </section>
</article>

为啥这么改？ #

我给你拆解下关键逻辑：

1. 固定容器尺寸：给article.product明确设置height和width，让图片有清晰的边界可以参考，不会乱缩放。
2. 精准计算图片最大尺寸：用calc()扣除容器和图片的边框，确保图片的最大缩放范围刚好贴合容器内部的可用空间，不会超出边界。
3. object-fit: contain：这个属性是核心，它会让图片自动按比例缩放，直到碰到max-height或max-width的限制，而且始终完整显示，不会裁剪或变形。
4. 横向滚动支持：section.gallery的overflow-x:scroll保证了当图片总宽度超过容器时，用户可以横向滚动查看所有图片。

三个场景的验证效果 #

• 场景1：图片未填充容器：如果图片原始比例的最大适配尺寸比容器小，图片会保持自己的比例，乖乖待在容器里，不会被强制拉伸。
• 场景2：适配高度但宽度不超界：竖版图片会优先适配容器的高度，宽度自动按比例缩小，不会超出容器，完整显示整张图。
• 场景3：任意容器高度适配：要是你改了容器的高度（比如改成80vh），只要同步修改max-height里的calc()值（改成80vh - 40px），图片就能自动适配新的容器边界，完美达到效果。

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