在HTML中，改变图片大小是一个常见的需求，可以通过多种方式实现，本文将详细介绍如何使用HTML和CSS来调整图片的大小。
1、使用HTML属性
在HTML中，可以通过width和height属性直接设置图片的尺寸，这两个属性可以设置为具体的像素值或者百分比。
<img src="image.jpg" width="200" height="100">
这将使图片宽度为200像素，高度为100像素，如果只设置其中一个属性，另一个属性会自动按比例缩放。
2、使用CSS样式
CSS提供了更多的灵活性来控制图片的大小，可以在HTML元素的style属性中直接添加样式，或者在外部CSS文件中定义样式，以下是使用内联样式的示例：
<img src="image.jpg" style="width: 200px; height: 100px;">
同样，可以设置百分比来实现响应式设计：
<img src="image.jpg" style="width: 50%; height: auto;">
这里图片宽度将占据其父容器的50%，高度会自动调整以保持原始宽高比。
3、使用CSS类
为了保持代码的整洁，建议在外部CSS文件中定义样式，在CSS文件中创建一个类：
.custom-image {
width: 200px;
height: 100px;
}
然后在HTML中为<img>标签添加这个类：
<img src="image.jpg" class="custom-image">
4、使用媒体查询
有时，你可能需要根据设备的屏幕尺寸来调整图片大小，CSS媒体查询可以帮助你实现这一点。
@media screen and (max-width: 768px) {
.custom-image {
width: 100px;
height: 50px;
}
}
这段代码表示，当屏幕宽度小于或等于768像素时，.custom-image类的图片尺寸将调整为100像素宽和50像素高。
5、注意事项
- 保持图片的宽高比：在调整图片大小时，最好保持原始的宽高比，以避免图片变形。
- 使用alt属性：为了提高网站的可访问性，建议在<img>标签中添加alt属性，描述图片的内容。
- 优化图片：在上传到网站之前，对图片进行压缩和优化，以减少加载时间。
通过上述方法，你可以轻松地在HTML中改变图片的大小，使用CSS可以提供更多的灵活性和控制，同时保持代码的整洁，记得在调整图片大小时保持宽高比，确保图片的视觉效果。