问题场景 #

页面结构如下：

<div class="wrapper">
    <a href="src" target="_blank">
        <img src="src" />
    </a>
</div>

需求：

• .wrapper容器的max-width设为45%
• 当图片按原比例计算的宽度在该45%范围内时，图片高度固定为400px
• 当图片宽度超出该范围时，图片高度尽可能最大化（保持比例）
• 原代码在窗口缩小后图片出现变形

原代码问题分析 #

原CSS存在两个关键问题：

1. 设置了固定height: 400px，同时width: auto，当容器宽度缩小时，图片宽度被max-width: 100%限制，但高度仍强制为400px，导致图片比例失调变形
2. max-height: auto是无效的CSS声明，max-height不支持auto作为有效值

解决方案 #

通过以下CSS实现需求，同时保证图片不变形：

.wrapper {
    max-width: 45%;
}

.wrapper img {
    /* 让图片宽度优先占满容器，高度自动保持比例 */
    width: 100%;
    height: auto;
    /* 限制图片最大高度为400px，满足宽幅图片的高度固定需求 */
    max-height: 400px;
    /* 确保图片在容器内保持比例显示，避免拉伸变形 */
    object-fit: contain;
}

效果说明 #

• 当容器宽度足够宽时：图片高度被max-height: 400px限制，宽度按原比例自适应，不会超出容器的45%宽度
• 当容器宽度缩小时：图片宽度自动占满容器，高度按原比例缩小，始终保持图片比例正常

如果需要兼容不支持object-fit的旧浏览器，可去掉该属性，仅保留width:100%; height:auto; max-height:400px;，同样能保证图片比例正常，此时宽幅图片会居中显示在容器内，也符合需求要求。

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