在网页开发中调整图片大小需结合html和css，常见方法有：1. 使用html的width和height属性直接设置固定尺寸，适合简单场景但不推荐用于响应式设计；2. 通过css控制图片尺寸，如设置width: 100%、max-width和height: auto实现灵活布局；3. 使用响应式图片技术，配合srcset与sizes属性适配不同分辨率设备；同时注意保持原图比例、避免模糊、压缩图片优化加载速度，并利用开发者工具测试多设备显示效果。
调整图片大小在网页开发中是一个很常见的需求。HTML 本身提供了设置图片尺寸的方式，但要真正掌握它，还需要结合 CSS 才能更灵活地控制。下面介绍几种常用的方法，帮助你轻松修改图片的显示尺寸。
使用 width 和 height 属性直接设置
HTML 的 <img> 标签支持 width 和 height 这两个属性，可以直接用来设置图片的宽高：
<img src="example.jpg" width="300" height="200" />
这种方法简单直接，适合固定尺寸展示。不过要注意的是，如果只设置其中一个属性（比如只设宽度），浏览器会自动按比例调整另一边，避免图片变形。
立即学习“前端免费学习笔记（深入）”；
建议：
- 设置时尽量保持原图比例，否则图片会被拉伸。
- 不推荐用这个方法做响应式设计，因为不够灵活。
用 CSS 控制图片尺寸更灵活
实际开发中，我们通常使用 CSS 来控制图片大小，这样可以更好地实现响应式布局和样式统一：
<img src="example.jpg" style="width: 100%; max-width: 500px; height: auto;" />
上面这段代码的意思是：图片宽度占满父容器，但最大不超过 500 像素，高度自动按比例缩放。
常见技巧：
- 设置
height: auto可以保证图片不变形。 - 使用百分比可以让图片适应不同屏幕。
- 结合
max-width或min-width能防止图片过大或过小。
图片自适应屏幕尺寸（响应式图片）
如果你希望图片在不同设备上都能良好显示，可以用响应式图片技术：
<img src="example.jpg" alt="示例图片" style="width: 100%; height: auto;">
这样图片会根据其容器的宽度自动缩放，并保持比例。你也可以配合媒体查询来为不同分辨率提供不同的图片源：
<img src="small.jpg" alt="响应式图片"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px">这种方式适用于对加载速度和用户体验都有要求的项目。
注意事项与小技巧
- 不要强行拉大图片：原始图片太小的话，放大后会模糊。
- 优先用 CSS 控制：比 HTML 属性更强大、易维护。
- 测试不同设备显示效果：浏览器开发者工具可以帮助模拟不同屏幕尺寸。
- 压缩图片再上传：大图即使通过代码缩小，加载速度也不会变快。
基本上就这些方法了，不复杂但容易忽略细节。只要理解了比例、单位和响应式原理，就能灵活控制图片大小，适配各种网页场景。
