HTML中设置图片宽度和高度的方法
在网页开发中，图片是提升内容表现力的重要元素。合理设置图片的宽度和高度，不仅能保证页面的视觉一致性，还能优化页面的加载体验。HTML中主要通过<img>标签的width和height属性来完成图片尺寸的设置，下面详细介绍其用法和相关注意事项。
一、基本语法说明
<img>标签是HTML中用于嵌入图片的标签，它本身不包含闭合标签，通过src属性指定图片的路径，而width和height属性则分别用于设置图片的显示宽度和显示高度。
这两个属性的取值有两种常用形式：
像素值：直接填写数字，单位为像素（px），例如
width="200"表示宽度为200像素。百分比：填写数字加百分号，例如
width="50%"表示宽度为父容器宽度的50%。
需要注意的是，如果不同时设置width和height，只设置其中一个属性，浏览器会按照图片的原始宽高比自动计算另一个维度的尺寸，避免图片变形。
二、使用示例
以下是不同场景下的<img>标签尺寸设置示例：
1. 固定像素尺寸设置
设置图片宽度为300像素，高度为200像素，代码如下：
<img src="https://www.ipipp.com/example.jpg" width="300" height="200" alt="示例图片">
2. 百分比尺寸设置
设置图片宽度为父容器宽度的80%，高度自动适配，代码如下：
<img src="https://www.ipipp.com/example.jpg" width="80%" alt="示例图片">
3. 只设置一个维度保持比例
只设置宽度为400像素，高度由浏览器自动计算，保证图片不变形，代码如下：
<img src="https://www.ipipp.com/example.jpg" width="400" alt="示例图片">
三、注意事项
不要设置超出图片原始尺寸的过大值，否则会导致图片模糊失真，影响显示效果。
如果同时设置
width和height且比例和原始图片不一致，图片会被拉伸或压缩变形，建议尽量保持原始宽高比，或者只设置其中一个属性。除了直接在<img>标签中设置属性，也可以通过CSS来设置图片尺寸，不过<img>标签的原生属性在图片加载前就会预留对应的布局空间，能减少页面布局偏移的问题。
设置尺寸时建议搭配
alt属性，当图片无法正常加载时，会显示alt中的文本描述，提升页面的可访问性。
四、常见问题解答
问：width和height属性可以设置小数吗？
答：不建议设置小数，浏览器会自动对小数进行，实际生效的尺寸会是整数像素值，直接设置整数可以避免不必要的计算。
问：用属性设置和用CSS设置有什么区别？
答：<img>标签的width和height是HTML原生属性，优先级高于CSS中的尺寸设置（除非CSS使用了!important声明）。原生属性会在页面解析时就确定图片的占位空间，避免图片加载完成后页面布局突然跳动，对用户体验更友好。