最稳妥的方式是直接使用HTML的width和height属性；它们以像素为单位，浏览器最早识别，可防止布局抖动，但不支持百分比或auto值。
直接用 width 和 height 属性最稳妥
HTML5 里设置图片尺寸，width 和 height 这两个原生属性依然有效，而且是浏览器渲染时最早识别的尺寸依据。它们写在 <img alt="HTML5如何设置图片宽高_HTML5设置图片宽高方法【属性】" > 标签里，单位是像素（不带 px），比如：
<img src="logo.png" style="max-width:90%" style="max-width:90%" alt="HTML5如何设置图片宽高_HTML5设置图片宽高方法【属性】" >浏览器会按这个尺寸分配初始布局空间，避免图片加载时页面“抖动”。注意：这两个属性只接受数字，不能写
width="100%" 或 width="auto" —— 那样会被忽略。
CSS 的 width/height 更灵活但有陷阱
用 CSS 控制更常见，比如：
img { width: 100%; height: auto; }但要注意几个关键点：
-
height: auto很重要，否则宽高比例会失真 - 如果父容器没设宽，
width: 100%可能撑满整个视口，未必是你想要的 - 某些老安卓 WebView 对
max-width: 100%支持不稳定，建议同时加width: auto - 用
object-fit（如object-fit: cover）可以控制裁剪方式，但它不改变图片原始尺寸，只影响显示效果
响应式场景下优先用 sizes + srcset
单纯设宽高解决不了多设备适配问题。真正现代的做法是结合响应式图片语法：
<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) 50vw,
33vw"
style="max-width:90%" height="300">
这里 width/height 仍要保留，用于占位和防止布局偏移；srcset 告诉浏览器有哪些图源；sizes 告诉浏览器在不同断点下“打算显示多宽”，浏览器据此选最匹配的图。漏掉 width/height，即使有 srcset，页面仍可能跳动。
立即学习“前端免费学习笔记（深入）”；
不要依赖 style="width:..." 内联写法做通用方案
内联样式虽然能生效，但维护性差、无法复用、容易被其他 CSS 覆盖。尤其当项目用了 CSS-in-JS 或组件库时，内联 style 的优先级可能不如预期。更麻烦的是：如果 JS 动态插入图片并靠 JS 设置 style.width，而图片还没加载完，就可能触发重排（reflow），影响性能。所以，静态尺寸走 HTML 属性，动态或复杂逻辑走外部 CSS 类，中间状态（如加载中）用骨架屏或占位 SVG 更可靠。
