HTML 中如何设置图片大小

在网页设计中，合理设置图片大小至关重要。它不仅影响页面的美观度，还关乎网站的加载速度与用户体验。下面将详细介绍在 HTML 中设置图片大小的方法。

最基本的方式是使用 width 和 height 属性。在 <img> 标签内，直接指定这两个属性的值，就能轻松调整图片的宽度和高度。例如：<img src="example.jpg" width="200" height="150">，这里将图片宽度设为 200 像素，高度设为 150 像素。不过要注意，这种方法若设置的宽高比例与图片原始比例不一致，图片可能会变形。

为避免图片变形，可只设置宽度或高度其中一个值，另一个值让浏览器自动计算保持比例。比如只想设置宽度为 300 像素，可写成 <img src="example.jpg" width="300">，此时浏览器会根据图片原始比例算出对应的高度值，确保图片不会失真。

除了固定像素值，还可以使用百分比来设置图片大小。例如：<img src="example.jpg" width="50%">，这表示图片宽度将占据其容器宽度的 50%。使用百分比设置在响应式设计中十分实用，能让图片在不同屏幕尺寸下自适应显示。当页面布局发生变化，图片会根据容器大小自动调整尺寸，始终保持合适的显示效果。

如果希望对图片大小有更精确的控制，还可以借助 CSS 样式来设置。首先为 <img> 标签添加一个 class 类名，如 <img src="example.jpg" class="my-image">。然后在 CSS 样式表中定义该类的样式，例如：.my-image { width: 400px; height: 300px; }。通过 CSS 设置图片大小，灵活性更高，而且可以集中管理页面中所有图片的样式，方便后期修改和维护。

在 HTML 中设置图片大小有多种方法，开发者可根据具体需求和项目特点选择合适的方式，以达到最佳的视觉效果和性能表现。