会，只在没配 height: auto 或没设 max-width 时才明显；浏览器默认按原始宽高比渲染，但 width: 100% 单独使用会强制撑宽而高度卡死，导致拉伸变形。
img 元素直接设置 width: 100% 会拉伸变形吗？
会，但只在没配 height: auto 或没设 max-width 时才明显。浏览器默认按原始宽高比渲染 img，但一旦你写死 width: 100% 又没管高度，它就可能被父容器强行撑开——尤其当父容器高度固定、或 CSS 里误加了 height: 100px 这类硬值。
关键不是“能不能缩放”，而是“缩放时是否保留 intrinsic aspect ratio”。现代浏览器只要不显式覆盖 height，width: 100% 就自动维持比例。
- ✅ 正确做法：
width: 100%; height: auto; - ❌ 错误组合：
width: 100%; height: 100%;（强制拉伸） - ⚠️ 注意：
max-width: 100%比width: 100%更安全，能防止图片原始尺寸小于容器时被放大失真
如何让响应式图片在容器内水平垂直居中？
居中分两层：一是图片自身缩放后居中，二是图片在父容器里对齐。纯 img 标签本身不支持 margin: auto 垂直居中，得靠父容器布局配合。
- 推荐用 Flexbox：
.container { display: flex; justify-content: center; align-items: center; } - 如果父容器有固定宽高且需兼容老浏览器，可用
text-align: center+line-height配合，但仅限单行垂直居中，不推荐 - 避免给
img设position: absolute再用top: 50%; left: 50%; transform: translate(-50%, -50%)—— 容易和外层滚动、定位上下文冲突，响应式下更难维护
srcset 和 sizes 属性真有必要吗？
有必要，但取决于使用场景。单纯靠 CSS 缩放一张大图，移动端会多下几倍流量；而不用 srcset，高清屏（dpr=2）上图片就会发虚。
立即学习“前端免费学习笔记（深入）”；
- 基础用法：
<img src="photo-small.jpg" srcset="photo-small.jpg 480w, photo-medium.jpg 768w, photo-large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, 1200px" alt="...">
-
sizes不是固定宽度，而是告诉浏览器“这张图在不同断点下大概占多少视口宽度”，浏览器据此选最接近的srcset项 - 如果项目已用构建工具（如 Webpack/Vite），可搭配
responsive-loader或vite-plugin-imagemin自动生成多尺寸资源，省去手写srcset
object-fit: cover 和 contain 在响应式图片中怎么选？
这两个属性只在 img 被限制了宽高（比如父容器设了 height: 300px）时才有意义。它们不改变图片原始加载行为，只控制“如何填满指定区域”。
-
object-fit: contain→ 等比缩放，完整显示，四周可能留白（适合头像、Logo） -
object-fit: cover→ 等比缩放并裁剪，填满整个区域（适合 Banner 图，但要确保关键内容不在边缘） - ⚠️ 注意：
object-fit不触发重新请求图片，所以不能替代srcset；它只是渲染层处理，原图仍按src或srcset加载 - 兼容性：IE 不支持，如需支持 IE，得用
background-image+background-size替代，但会牺牲语义性和 SEO
sizes 的写法——很多人直接抄示例写成 sizes="100vw"，结果在响应式卡片网格里，图片只占卡片宽度的 1/3，却还是加载了全屏宽度的图。这时候必须结合布局算出真实占用视口比例，否则响应式就只剩个样子。 
