使用max-width和height:auto确保图片自适应；通过padding-top百分比创建等比容器；结合object-fit控制填充方式，有效解决响应式中图片比例问题。
在响应式设计中，保持图片比例不变形是常见需求。关键在于让图片在不同屏幕尺寸下自动缩放，同时不破坏原有宽高比。
使用 max-width 和 height: auto
这是最基础也最有效的方法。设置图片最大宽度为100%，高度自动调整，可防止溢出容器且保持比例。
img {max-width: 100%;
height: auto;
}
适用于大多数场景，尤其内容区域中的插图或用户上传图片。
利用 padding-top 百分比 维持容器比例
当需要图片占位区域始终维持特定宽高比（如16:9、4:3），可用 padding 技巧创建“等比容器”。
立即学习“前端免费学习笔记（深入）”；
原理：padding 百分比基于父容器宽度计算，借此模拟高度。
人人站CMS家政月嫂保姆服务类模板1.4.2
下载
人人站CMS家政月嫂保姆服务类模板自带人人站内核及手机端，安装即用，图片文字均可视化，支持多种内容模型可根据需要自行添加。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜索等
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 比例 (9 ÷ 16 = 0.5625) */
overflow: hidden;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 裁剪以填满 */
}
适合轮播图、视频封面、卡片式布局等需固定视觉比例的场景。
结合 object-fit 精确控制填充方式
当图片放入固定尺寸容器时，object-fit 可替代 background-size 实现类似效果。
img {width: 100%;
height: 300px;
object-fit: cover; /* 或 contain、scale-down */
object-position: center;
}
- cover：保持比例并填满容器，可能裁剪
- contain：完整显示图片，留白若比例不符
- scale-down：缩小图片至适合，等同于原始或 contain 中较小者
此方法适合头像、商品图等统一尺寸展示需求。
基本上就这些。合理组合 max-width、padding 技巧和 object-fit，能应对多数响应式图片比例问题。核心是避免设置固定高度，优先让浏览器按比例计算。
