只写width或height一个属性即可等比缩放，浏览器依据原始宽高比自动计算缺失值；同时写死两者会导致拉伸变形；width/height值须为纯数字，max-width:100%+height:auto是响应式底线。
<img> 标签必须带 src 和 alt，否则语义缺失、可访问性差、SEO 受损，且现代浏览器可能拦截加载。
为什么只写 width 或 height 一个属性就能保比例
浏览器会读取图片原始宽高比（EXIF 或文件头信息），当你只设 width="400"，它自动算出对应 height 值并渲染；反之亦然。这是 HTML 渲染引擎的默认行为，不是 CSS 的功劳。
- 常见错误：同时写死
width="300" height="300"，但原图是 16:9 —— 结果明显拉伸模糊 - 注意：
width和height的值只能是纯数字（如width="300"），写成width="300px"或width="50%"是无效 HTML - 该属性作用是「预留布局空间」，能防止图片加载后页面跳动（CLS 问题），尤其在 SSR 或静态页中仍有价值
max-width: 100% + height: auto 是响应式底线
这是目前兼容性最好（IE9+）、最防崩的写法，适用于文章正文、CMS 输出等不可控图片源的场景。
-
max-width: 100%是“上限”，小图不会被强行拉大；height: auto是关键，缺了它比例就保不住 - 别用
width: 100%单独写——如果父容器是display: inline或没设宽，它可能撑满整个视口 - 这条规则应加在全局基础样式里，比如
article img或.content img，而不是靠每个<img>写内联 style
固定容器里要裁剪对齐？优先用 aspect-ratio 而不是 object-fit
当图片必须塞进一个 300×200 的卡片或网格项，且你不想让高度塌陷、也不愿手动裁图时，aspect-ratio 更可靠。
-
aspect-ratio: 16/9会强制容器保持比例，再配合object-fit: cover控制内容填充方式 -
object-fit对<img>有效，但对<picture></picture>里的<source></source>无效 - 如果要兼容老浏览器（如 IE），得回退到 JS 计算或 padding-top 技巧，
aspect-ratio目前支持到 Chrome 88+/Firefox 89+
真正麻烦的从来不是怎么调尺寸，而是图片来源不可控、设备像素比不一致、首屏加载时机不对——这些点光靠 width/height 或一行 CSS 压根压不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
