最常用方法是用html的width属性直接设图片宽度，单位为像素且可省略；css的width更灵活，支持多种单位并适配响应式，推荐结合max-width:100%使用。
用 width 属性直接设图片宽度（最常用）
HTML 原生支持在 <img> 标签里用 width 属性控制横向尺寸，单位是像素（不写单位，默认 px）。
-
width是 HTML 属性，不是 CSS；它会覆盖部分 CSS 的width声明（尤其当没有!important时） - 只设
width时，浏览器会自动等比缩放高度，保持原始宽高比 - 值可以是数字（如
300）或带单位的字符串（如"300px"），但 HTML 规范允许省略引号和单位，写成width=300即可 - 慎用大数值：比如
width=2000加载一张小图，会导致模糊拉伸
示例：
@@##@@
用 CSS 的 width 控制更灵活（推荐）
比起 HTML 属性，CSS 的 width 更可控，尤其适合响应式场景。它能接受 %、rem、vw 等多种单位，还能配合 max-width 防溢出。
- 设
width: 100%时，图片宽度会随父容器变化，但需确保父元素有明确宽度（否则可能塌陷） - 单独设
width不加height，浏览器仍保持宽高比；设了height反而可能变形 - 移动端强烈建议加
max-width: 100%和，避免图片撑破屏幕
示例：
img {<br> width: 80%;<br> max-width: 600px;<br> height: auto;<br>}
srcset + <code>sizes 实现响应式图片宽度适配
当需要根据设备屏幕宽度加载不同尺寸的图片并控制其显示宽度时，不能只靠单个 width 或 CSS —— 必须用 srcset 和 sizes 配合媒体查询逻辑。
-
srcset提供多张图片资源及其固有宽度（如photo-400w.jpg 400w） -
sizes告诉浏览器“在什么条件下，这张图应该显示多宽”，例如sizes="(max-width: 768px) 100vw, 50vw" - 浏览器据此选择最匹配的源图，并按
sizes描述的宽度渲染，此时 CSS 的width仍生效，但只是最终显示宽度的上限 - 漏掉
sizes会导致浏览器无法正确计算，可能始终加载最大图
示例：
@@##@@ src="photo-800.jpg"<br> srcset="photo-400.jpg 400w,<br> photo-800.jpg 800w,<br> photo-1200.jpg 1200w"<br> sizes="(max-width: 480px) 100vw,<br> (max-width: 960px) 50vw,<br> 33vw">
常见错误：图片变模糊 / 拉伸 / 不显示宽度
这些现象背后往往不是代码写错，而是对“谁在控制宽度”缺乏判断：
- 写了
width=300又写style="width: 100%"→ 后者通常胜出，但若用了!important或内联样式优先级高，结果难预测 - CSS 中写了
width: 200px但父容器display: flex且没设flex-shrink: 0→ 图片可能被压缩 - 用
background-image替代<img src="photo.jpg" style="max-width:90%">标签后，误以为width属性还有效 → 背景图宽度由background-size控制，和<img>完全无关 - 图片本身分辨率太低（比如只有 200px 宽），却强制拉到 800px → 必然模糊，这时该换图，而不是调 CSS
改宽度前，先右键「检查元素」，看最终生效的是哪条 width 声明，再决定动 HTML 属性、内联 style，还是外部 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
