HTML 中如何设置图片大小

在网页设计中，合理设置图片大小至关重要。它不仅影响网页的视觉效果，还关乎页面的加载速度和用户体验。下面就来详细介绍在 HTML 中设置图片大小的方法。

最基本的方式是使用 width 和 height 属性。例如，有一张图片文件名为 example.jpg，在 HTML 代码里可以这样写：<img src="example.jpg" width="200" height="150">。这里，width 设置图片的宽度为 200 像素，height 设置高度为 150 像素。这种方法简单直接，能快速调整图片到你想要的尺寸。不过要注意，若只设置其中一个属性，比如只写 width="200"，图片会按原始比例自动调整高度；反之亦然。如果随意设置宽高比例，可能导致图片变形，影响美观。

除了固定像素值，也可以使用百分比来设置图片大小。代码示例为：<img src="example.jpg" width="50%" height="50%">。这会让图片宽度和高度都变为原始大小的 50%。使用百分比的好处在于，图片能根据父元素的大小进行自适应调整。当页面布局在不同设备或屏幕尺寸下发生变化时，图片也能保持合适的显示比例，确保网页的响应式设计效果。

在 CSS 中设置图片大小也很常用。首先给图片添加一个类名，如 <img src="example.jpg" class="my-image">，然后在 CSS 样式表中定义这个类：.my-image { width: 300px; height: 250px; }。CSS 控制图片大小的优势在于可以进行更复杂的样式设置和集中管理。如果多个图片应用了同一个类，只需修改 CSS 样式，所有相关图片的大小都会统一改变。

另外，还可以使用 max-width 和 max-height 属性来限制图片的最大尺寸。比如：.my-image { max-width: 100%; height: auto; }，这能保证图片在不超过父元素宽度的前提下，按原始比例显示，防止图片过大撑破布局。

掌握这些在 HTML 中设置图片大小的方法，能让网页设计更加灵活高效，打造出视觉效果佳且性能良好的网站。