可通过HTML的width/height属性设固定像素、仅设width保比例、CSS内联样式、CSS类统一控制、srcset/sizes适配多分辨率五种方法调整网页图片尺寸。
如果您在网页中插入图片后发现其显示尺寸不符合预期，可以通过HTML原生属性直接调整图片的宽度和高度。以下是几种常用且有效的调整方法：
一、使用width和height属性设置固定像素值
通过为标签添加width和height属性，可强制指定图片在页面中渲染的像素尺寸，浏览器将按该数值缩放图像（不改变原始文件）。
1、在标签内添加width="300"属性，设定图片显示宽度为300像素。
2、在同一标签内添加height="200"属性，设定图片显示高度为200像素。
立即学习“前端免费学习笔记（深入）”；
3、确保属性值不带单位（如px），仅写数字，例如：width="300" height="200"。
二、仅设置width属性并保持宽高比
只指定width属性时，浏览器会自动按原始图片的宽高比例计算并设置height，避免图像被拉伸或压扁。
1、在标签中添加width="50%"，使图片宽度占其父容器宽度的50%。
2、删除或省略height属性，让浏览器自动推算对应高度。
3、验证效果：图片在不同父容器宽度下仍保持原始比例，height将由浏览器动态计算，无需手动填写。
三、使用CSS内联样式替代HTML属性
虽然width/height是HTML属性，但现代实践中更推荐用style属性以CSS方式控制尺寸，兼容性更强且便于维护。
1、在标签中添加style属性，格式为 style="max-width:90%"。
2、如需同时设定高度，写为style="width: 400px; height: auto;"，其中auto确保比例不变。
3、若需响应式尺寸，可使用max-width: 100%; height: auto;，确保图片在窄屏中不溢出容器。
四、通过CSS类统一控制多张图片尺寸
当页面中有多张需统一样式的图片时，定义CSS类可避免重复书写样式，提升代码一致性。
1、在
2、在每张标签中添加class="img-small"。
3、修改类定义即可批量更新所有应用该类的图片尺寸，无需逐个修改每个img标签的属性。
五、使用srcset与sizes属性适配多分辨率设备
针对高清屏（如Retina）或不同视口宽度，srcset可提供多张源图，sizes则定义图片在不同断点下的显示宽度，浏览器自动选择最优资源。
1、在标签中添加srcset属性，列出多个图片路径及对应宽度描述，例如：srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"。
2、添加sizes属性，定义媒体条件与宽度，例如：sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw"。
3、保留原有的src属性作为降级方案，确保无srcset支持的浏览器仍能加载基础图片。
