控制图片尺寸主要通过html属性或css实现，使用width和height可设定像素或百分比，CSS支持更灵活的响应式设置，推荐结合max-width与height:auto保持比例，避免变形模糊，确保布局适配。
控制HTML图片的宽度和高度，主要通过width和height属性或css样式来实现。合理设置可以确保图片在页面中正常显示，避免布局错乱。
使用HTML width和height属性
在<img>标签中直接添加width和height属性，可快速设定图片尺寸。
- 数值单位默认为像素（px）
- 支持数字或百分比（如50%）
- 浏览器会根据设置自动缩放图片
示例：
<img src=”example.jpg” width=”300″ height=”200″ alt=”示例图片”>
立即学习“前端免费学习笔记（深入）”；
这会把图片显示为宽300像素、高200像素。
使用CSS控制图片尺寸
CSS提供了更灵活的控制方式，推荐使用内联style或外部样式表。
常用写法：
<img src=”example.jpg” style=”width: 300px; height: 200px;”>
也可以用百分比：
<img src=”example.jpg” style=”width: 50%; height: auto;”>
说明：
-
height: auto保持图片原始比例 - 用
max-width可防止图片超出容器 - 响应式设计中常设
max-width: 100%
常见问题与建议
设置图片尺寸时注意以下几点：
- 只设宽度，高度设为auto，避免图片变形
- 不要将小图放大太多，会导致模糊
- 移动端建议使用相对单位（如%、vw）
- HTML属性和CSS同时存在时，CSS优先级更高
基本上就这些。用好width和height，能让图片更贴合页面布局。