通过 css grid 布局结合 `max-width`/`max-height` 与 `width: auto; height: auto`，可使图片在受限容器中自动缩放、居中显示且严格维持原始比例，避免溢出或拉伸失真。
在响应式布局中，常需让图片在固定尺寸（如带 max-height 的容器）内自适应显示，同时不裁剪、不失真、不溢出。传统方案如 width: 100%; height: auto 或 height: 100%; width: auto 往往失效——前者忽略容器高度限制导致纵向溢出，后者则可能横向撑破容器宽度。
✅ 推荐解法：CSS Grid + 自动尺寸约束
核心思路是利用 Grid 容器的内在布局能力控制内容尺寸边界，并让图片自身通过 max-width: 100%; max-height: 100%; width: auto; height: auto 触发浏览器的「按比例缩放」逻辑（即取 min(100% 宽度缩放值, 100% 高度缩放值)），再借助 margin: auto 和 place-content: center 实现完美居中。
以下是完整、可靠的工作代码：
.container {
max-height: 50px;
border: 2px solid red;
display: grid;
place-content: center; /* 水平+垂直居中 */
grid-template-rows: 100%; /* 确保行高受容器约束 */
overflow: hidden; /* 可选：防止极小尺寸下渲染异常 */
resize: both; /* 可选：便于调试时拖拽调整容器大小 */
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
margin: auto; /* 在 Grid 单元格内居中对齐 */
}<div class="container"> <img src="https://placehold.co/40x60.jpg" style="max-width:90%" style="max-width:90%" alt="Portrait image"> </div>
? 关键原理说明：
- max-width: 100% 和 max-height: 100% 设定图片尺寸的绝对上限（相对于容器内容区）；
- width: auto; height: auto 启用浏览器原生的等比缩放算法——图片会以最小缩放因子（即同时满足宽高约束）进行缩放；
- Grid 容器的 place-content: center 保证无论图片最终尺寸多大（只要 ≤100%），都能精确居中；
- 不依赖 object-fit（其 contain 虽类似，但需额外处理父容器尺寸和空白区域）。
⚠️ 注意事项：
- 请确保图片带有明确的 width 和 height 属性（或通过 aspect-ratio 声明），有助于浏览器更早计算原始比例，提升渲染稳定性；
- 若容器本身无显式宽高（如 display: inline-grid 或父级未设宽），建议补充 width: fit-content 或设定最小宽度；
- 在旧版浏览器（如 IE）中 Grid 支持有限，如需兼容，可降级为 Flexbox 方案（需额外 wrapper 和 align-items/justify-content 配合）。
该方案简洁、语义清晰、零 JS 依赖，是现代 CSS 实现「容器约束下等比响应式图片」的最佳实践之一。
