HTML中设置图片尺寸最简单是用width和height属性，仅接受纯数字像素值；CSS更灵活但需加height: auto防变形；响应式需配合srcset/sizes；object-fit可控制裁剪对齐。
直接用 width 和 height 属性最简单
HTML 原生支持在 <img> 标签里写 width 和 height，浏览器会按像素值缩放图片。比如：
<img src="logo.png" width="200" height="100">注意：这两个属性只接受纯数字（单位是像素），不能写
width="200px" 或 width="50%"，否则无效。
CSS 的 width 和 height 更灵活但要注意默认行为
用 CSS 控制更常用，也支持百分比、vw、max-width 等：
img { width: 100%; height: auto; }关键点：
-
height: auto必须加，否则图片会拉伸变形 - 如果父容器没设宽高，
width: 100%会按父容器宽度算——但父容器可能本身是display: inline，导致宽度计算异常 -
max-width: 100%比单纯width: 100%更安全，能防止图片撑破容器
响应式图片别只靠 CSS，得配合 srcset 和 sizes
单纯缩放一张大图，手机端仍会下载原图，浪费带宽。真要适配多屏，得用 HTML 原生响应式方案：
<img src="small.jpg"
srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">
-
srcset列出不同分辨率的图源，w单位表示图片固有宽度 -
sizes告诉浏览器“在什么条件下，这张图应该占多宽”，浏览器据此选最匹配的srcset项 - 漏掉
sizes，浏览器可能默认用100vw，导致小屏也加载大图
object-fit 解决裁剪和对齐问题
当容器宽高固定，而图片比例不匹配时，CSS 默认会拉伸。用 object-fit 可控裁剪或缩放：
img { width: 300px; height: 200px; object-fit: cover; }
-
cover：等比缩放填满，溢出部分裁掉（类似背景图background-size: cover） -
contain：等比缩放，全部显示，留白 -
fill：直接拉伸填满（就是默认行为） - 注意：
object-fit对<img>有效，但对<picture>内的<source>无效
width 和 height 往往不够——尺寸变化、设备像素比、网络条件、语义化需求都得一起考虑，漏掉任意一环，就可能在某个机型上出白边、模糊或卡顿。 
