最稳妥的方式是直接使用HTML的width和height属性；它们以像素为单位，浏览器最早识别，可防止布局抖动，但不支持百分比或auto值。
直接用 width 和 height 属性最稳妥
HTML5 里设置图片尺寸，width 和 height 这两个原生属性依然有效，而且是浏览器渲染时最早识别的尺寸依据。它们写在 px），比如：
@@##@@浏览器会按这个尺寸分配初始布局空间，避免图片加载时页面“抖动”。注意：这两个属性只接受数字，不能写
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
单纯设宽高解决不了多设备适配问题。真正现代的做法是结合响应式图片语法：
@@##@@
这里 width/height 仍要保留，用于占位和防止布局偏移；srcset 告诉浏览器有哪些图源；sizes 告诉浏览器在不同断点下“打算显示多宽”，浏览器据此选最匹配的图。漏掉 width/height，即使有 srcset，页面仍可能跳动。
citySHOP 多用户商城
下载
citySHOP是一款集CMS、网店、商品、系统，管理更加科学快速；全新Jquery前端引擎；智能缓存、图表化的数据分析，手机短信营销；各种礼包设置、搭配购买、关联等进一步加强用户体验；任何功能及设置都高度自定义；MVC架构模式，代码严禁、规范；商品推荐、促销、礼包、折扣、换购等多种设置模式；商品五级分类，可自由设置分类属性；商品展示页简介大方，清晰，图片自动放大，无需重开页面；商品评价、咨询分开
立即学习“前端免费学习笔记（深入）”；
不要依赖 style="width:..." 内联写法做通用方案
内联样式虽然能生效，但维护性差、无法复用、容易被其他 CSS 覆盖。尤其当项目用了 CSS-in-JS 或组件库时，内联 style 的优先级可能不如预期。更麻烦的是：如果 JS 动态插入图片并靠 JS 设置 style.width，而图片还没加载完，就可能触发重排（reflow），影响性能。所以，静态尺寸走 HTML 属性，动态或复杂逻辑走外部 CSS 类，中间状态（如加载中）用骨架屏或占位 SVG 更可靠。
