如何让图片在容器内自适应尺寸并保持宽高比

通过 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″），有助于浏览器提前计算宽高比，提升加载时的布局稳定性。

该方案简洁、健壮、语义清晰，是解决“容器内等比缩放图片”问题的现代标准实践。