图片撑破容器应设max-width: 100%和height: auto保持宽高比，避免width: 100%单独使用导致拉伸；配合object-fit控制填充方式，并用srcset/sizes实现带宽优化。
图片在不同屏幕下撑破容器怎么办
直接给 <img> 加 width: 100% 很常见，但容易忽略父容器是否设置了 max-width 或 overflow，导致图片横向溢出或拉伸变形。关键不是“缩放”，而是让图片在保持宽高比的前提下，自适应容器边界。
- 父容器必须有明确宽度（比如
width: 100%或固定值），否则100%无参照 - 加
height: auto强制维持原始宽高比，否则浏览器可能按默认height: auto但受其他 CSS 干扰而失真 - 避免同时设
width和height（除非你明确要裁剪），否则必然变形
用 object-fit 实现等比缩放与裁剪控制
object-fit 是现代方案的核心，它作用于 <img> 本身，决定图片如何填满其盒模型。不支持 IE，但 Chrome/Firefox/Safari/Edge 均已稳定支持。
-
object-fit: contain：完整显示图片，留白可接受（适合头像、图标） -
object-fit: cover：等比缩放并裁剪，填满容器（适合 banner、卡片图） - 必须配合
width和height（哪怕设为100%）才生效，单独写没用 - 如果父容器是 flex 项，记得加
min-width: 0防止图片溢出（flex 默认不收缩）
<div style="width: 300px; height: 200px; border: 1px solid #ccc;"> <img src="photo.jpg" style="max-width:90%"> </div>
响应式图片要用 srcset + sizes 而不只是 width/height
单纯靠 CSS 缩放，图片文件本身还是大图下载，浪费带宽。真正适配需要告诉浏览器“不同视口该加载哪张图”。
-
srcset列出多个分辨率资源（如photo-400w.jpg 400w, photo-800w.jpg 800w） -
sizes描述图片在页面中的显示宽度（如(max-width: 768px) 100vw, 50vw），浏览器据此选最匹配的srcset项 - 不要只依赖
src，否则srcset不生效；src应作为降级 fallback - 工具链中可用
sharp或imagemin自动生成多尺寸图，别手搓
<img src="photo-400w.jpg" srcset="photo-400w.jpg 400w,
photo-800w.jpg 800w,
photo-1200w.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" alt="描述文字">
移动端双倍屏（dpr=2）下图片模糊怎么解
CSS 中的 1px 在 Retina 屏实际渲染为 2 物理像素，但普通图片没提供 2x 资源，就会插值拉伸变糊。这不是缩放逻辑问题，是资源密度不足。
- 用
image-set()（CSS 方案，兼容性差）不如用srcset的x描述符更可靠 - 例如：
srcset="photo-1x.jpg 1x, photo-2x.jpg 2x"，浏览器自动选对应 dpr 的图 - 后端生成时注意命名规范，前端构建工具（如 webpack）可通过 loader 自动注入
2x资源 - 检查 Chrome DevTools → Network → 图片请求的 actual size，确认加载的是 2x 还是 1x 文件
sizes 属性——很多人写了 srcset 却没配 sizes，结果浏览器全按 1x 加载，或者 fallback 到 src。还有就是 object-fit 忘了设 height，盒子高度塌陷，图片根本不出现在视口里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
