通过 css grid 结合 `max-width`/`max-height` 与 `auto` 值，可使图片在受限容器中自动缩放、居中显示且严格维持原始宽高比，避免溢出或拉伸变形。
在响应式布局中，常需让图片在固定尺寸（如 max-height: 50px）的容器内“智能适配”：既不超出容器边界，又不破坏自身宽高比。仅用 width: 100%; height: auto 或 height: 100%; width: auto 都存在缺陷——前者可能导致高度溢出 max-height，后者则易导致宽度超限；而强行设置 max-height + width: 100% 又会因忽略比例约束引发拉伸失真。
推荐解法：CSS Grid + 自适应尺寸控制
核心思路是利用 Grid 容器的内在布局能力，将图片作为唯一子元素进行内容对齐与尺寸约束：
.container {
max-height: 50px;
border: 2px solid red;
display: grid;
place-content: center; /* 水平垂直居中 */
grid-template-rows: 100%; /* 确保行高参与约束 */
overflow: hidden; /* 可选：防止极小尺寸下渲染异常 */
}
img {
max-width: 100%;
max-height: 100%;
width: auto; /* 允许宽度随比例自由计算 */
height: auto; /* 允许高度随比例自由计算 */
margin: auto; /* 在 Grid 中强化居中容错性 */
}@@##@@
✅ 优势说明：
- max-width: 100% 和 max-height: 100% 共同构成双向上限，浏览器会自动选择更严格的约束（即按比例缩放至不越界）；
- width: auto; height: auto 让浏览器基于原始宽高比重新计算实际渲染尺寸；
- display: grid + place-content: center 确保无论图片最终尺寸如何，都能精准居中，且不依赖父容器 padding 或 flex hack；
- 无需 JavaScript，纯 CSS 实现，兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ 16）。
⚠️ 注意事项：
- 若容器本身无明确宽高（如 width: auto 且无父级约束），建议为 .container 添加 width: fit-content 或显式 width，以防图片在超宽场景下横向撑开；
- 对于 IE11 等不支持 Grid 的旧环境，可降级使用 object-fit: contain（需配合 width: 100%; height: 100% 及固定容器尺寸）；
- 始终保留 width 和 height HTML 属性（如示例中的 width="40" height="60"），有助于浏览器提前计算宽高比，提升加载时的布局稳定性。
该方案简洁、健壮、语义清晰，是解决“容器内等比缩放图片”问题的现代标准实践。
