使用 max-width: 100% 和 height: auto 可使图片响应式缩放并保持比例；结合 aspect-ratio 或 padding-bottom 技巧能固定宽高比，防止布局偏移；通过 object-fit 可实现裁剪填充效果；搭配 srcset 与 sizes 属性可针对不同屏幕提供适配的图片资源，提升加载性能与显示质量。
在响应式网页设计中，让图片自动缩放并保持宽高比例，同时不超过容器宽度，是常见的需求。通过合理使用 CSS 的 max-width 和 height: auto，再结合 aspect-ratio（或传统 padding 技巧），可以轻松实现。
1. 使用 max-width 和 height: auto 保持比例
这是最基础也最有效的方法。设置图片最大宽度为 100%，并让高度自动调整，可确保图片在小屏幕上缩小但不拉伸。
img {
max-width: 100%;
height: auto;
display: block; /* 可选：避免底部多余空白 */
}
说明：无论图片原始尺寸多大，它都不会超出父容器，且宽高比始终不变。
2. 使用 aspect-ratio 确保容器预留空间
现代浏览器支持 aspect-ratio 属性，可强制图片或其容器保持特定比例（如 16:9、4:3），防止布局跳动。
立即学习“前端免费学习笔记（深入）”；
img {
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* 保持 16:9 比例 */
}
如果图片本身比例不符，可通过外层容器应用 aspect-ratio 并隐藏溢出，实现“裁剪式”显示：
.img-container {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover; / 裁剪填满 /
}
3. 兼容旧浏览器：用 padding-bottom 模拟比例
对于不支持 aspect-ratio 的环境，可用经典的“padding 百分比”技巧创建固定比例容器。
.img-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
注意：padding-bottom 百分比基于容器宽度计算，因此能实现动态比例。
4. 响应不同屏幕的图片源：配合 srcset
除了缩放样式，还可使用 srcset 提供多张图片，让浏览器根据屏幕尺寸选择最合适的一张：
@@##@@
这样既保证清晰度，又提升加载速度。
基本上就这些。关键点是：max-width: 100% + height: auto 是基础，aspect-ratio 或 padding 技巧控制比例，再搭配 object-fit 和 srcset 实现更精细效果。不复杂但容易忽略细节。
