使用max-width和height:auto确保图片自适应；通过padding-top百分比创建等比容器；结合object-fit控制填充方式，有效解决响应式中图片比例问题。

在响应式设计中，保持图片比例不变形是常见需求。关键在于让图片在不同屏幕尺寸下自动缩放，同时不破坏原有宽高比。

使用 max-width 和 height: auto

这是最基础也最有效的方法。设置图片最大宽度为100%，高度自动调整，可防止溢出容器且保持比例。

适用于大多数场景，尤其内容区域中的插图或用户上传图片。

利用 padding-top 百分比 维持容器比例

当需要图片占位区域始终维持特定宽高比（如16:9、4:3），可用 padding 技巧创建“等比容器”。

原理：padding 百分比基于父容器宽度计算，借此模拟高度。

适合轮播图、视频封面、卡片式布局等需固定视觉比例的场景。

结合 object-fit 精确控制填充方式

当图片放入固定尺寸容器时，object-fit 可替代 background-size 实现类似效果。

• cover：保持比例并填满容器，可能裁剪
• contain：完整显示图片，留白若比例不符
• scale-down：缩小图片至适合，等同于原始或 contain 中较小者

此方法适合头像、商品图等统一尺寸展示需求。

基本上就这些。合理组合 max-width、padding 技巧和 object-fit，能应对多数响应式图片比例问题。核心是避免设置固定高度，优先让浏览器按比例计算。