关键在于保留原始宽高比前提下弹性变化：图片用max-width:100%+height:auto；视频同理并清除内联宽高属性；背景图用background-size:cover/contain配合aspect-ratio或padding-bottom锁定容器比例。
让图片和视频在响应式设计中等比例缩放，关键不是“强行拉伸”，而是“保留原始宽高比的前提下，让尺寸随容器或视口弹性变化”。不同元素类型（<img>、<video>、背景图）适用不同但逻辑一致的方案。
图片：用 max-width + height: auto
这是最通用、兼容性最好（IE8+）、语义最清晰的方式：
-
max-width: 100%确保图片不会超出父容器宽度，大图自动缩小，小图保持原尺寸 -
height: auto强制浏览器按原始比例重新计算高度，避免变形 - 必须确保父容器有明确宽度（比如
width: 100%或使用 flex/grid 布局），否则max-width失效 - 避免内联
height属性或全局img { height: 100px }类规则，它们会覆盖auto
视频：同理，但需额外控制内联属性
<video> 默认行为类似 <img>，也支持 max-width + height: auto：
- 直接给
video元素加样式：max-width: 100%; height: auto; - 注意移除 HTML 中可能存在的
width和height内联属性（如<video width="640" height="360">），它们优先级高于 CSS，会导致固定尺寸、失去响应性 - 若需全屏自适应（如模态弹窗中的视频），可用
width: 100vw; height: auto;配合object-fit: contain防止黑边
背景图：用 background-size: cover 或 contain + 宽高比容器
背景图不能靠 height: auto，必须锁定容器比例再控制填充方式：
-
background-size: cover—— 图片等比缩放并填满容器，可能裁剪边缘（适合封面、横幅） -
background-size: contain—— 图片等比缩放并完整显示，可能留白（适合图标、示意图） - 容器必须有固定宽高比，推荐用
aspect-ratio: 16 / 9（现代浏览器）或padding-bottom技巧（兼容旧版） - 例如：
.hero { width: 100%; aspect-ratio: 16 / 9; background: url(...) center/cover no-repeat; }
需要固定容器比例时：统一用 aspect-ratio + object-fit
当布局要求卡片、轮播项、头像框等区域始终是 4:3 或 1:1，而内部媒体内容尺寸不确定时：
- 给容器设
aspect-ratio: 4 / 3; width: 100%;，它自己就保持比例 - 图片或视频设
width: 100%; height: 100%; object-fit: cover;（或contain） -
object-fit不改变原始尺寸，只控制渲染方式，所以仍需width/height: 100%占满容器 - 旧浏览器不支持
aspect-ratio？用padding-bottom: 75%+position: relative/absolute模拟
