在网页开发中，合理地调整图片大小是优化页面布局、提升用户体验以及控制页面加载速度的关键步骤。如果图片尺寸设置不当，不仅会导致页面布局错乱，还可能造成图片变形失真。本文将详细介绍在HTML中调整图片大小的几种常用方法，帮助你根据实际需求选择最合适的方案。
一、使用HTML原生属性（width 和 height）
最直接的方法是使用 <img> 标签自带的 width 和 height 属性。这种方法定义的是图片的固有尺寸，属性值默认单位为像素（px）。
<img src="https://www.ipipp.com/images/example.jpg" width="300" height="200">
注意事项：
1. 使用这种方式设置大小时，如果只设置 width 或 height 中的一个，另一个属性会按图片原始比例自动缩放；如果同时设置两个属性，且比例与原图不符，图片就会被拉伸或挤压变形。
2. 现代浏览器在加载网页时，如果HTML标签中包含了 width 和 height 属性，会在图片加载完成前就预留出相应的空间，从而有效减少页面内容的抖动（CLS，累积布局偏移）。
二、使用CSS内联样式（style属性）
将CSS样式直接写在 <img> 标签的 style 属性中，可以更灵活地使用不同的CSS单位（如px、%、rem等）。
<img src="https://www.ipipp.com/images/example.jpg" style="width: 300px; height: 200px;">
虽然这种方式比HTML属性更灵活，但它将样式与结构混合在一起，不利于代码的后期维护，通常只适用于需要单独调整某一张图片样式的场景。
三、使用CSS内部或外部样式表（推荐）
在实际开发中，最推荐的做法是将样式与结构分离，通过CSS选择器统一控制图片大小。这不仅能保持HTML代码的整洁，还便于全局修改。
<style>
.custom-img {
width: 300px;
/* 将高度设置为auto，可以保证图片按原比例缩放，防止变形 */
height: auto;
}
</style>
<img src="https://www.ipipp.com/images/example.jpg" class="custom-img">四、实现响应式图片
在移动端设备多样化的今天，响应式设计至关重要。我们通常希望图片能够随着容器宽度的变化而自动调整大小，同时不超出其原始最大宽度。
img {
max-width: 100%;
height: auto;
}max-width: 100%; 表示图片的最大宽度不会超过其父容器的宽度。如果父容器变小，图片会等比例缩小；如果父容器很大，图片最多也只会显示其原始尺寸，从而避免因强行放大导致的模糊。
五、使用CSS object-fit属性控制裁剪与缩放
有时我们需要将图片填充到固定尺寸的容器中，又不想图片变形。这时可以使用CSS3的 object-fit 属性。它指定了可替换元素（如 <img>）的内容应该如何适配到其使用的高度和宽度确定的框中。
.cover-img {
width: 300px;
height: 300px;
object-fit: cover; /* 保持比例缩放，溢出部分被裁剪 */
}
.contain-img {
width: 300px;
height: 300px;
object-fit: contain; /* 保持比例缩放，完整显示图片，可能留白 */
}object-fit 常用值解析：
- cover： 保持图片宽高比缩放，保证图片完全覆盖容器，超出部分会被裁剪。适合头像、Banner等场景。
- contain： 保持图片宽高比缩放，保证图片完整显示在容器内，容器未被填满的区域会留白。
- fill： 默认值，拉伸图片以填满容器，不保持宽高比，会导致图片变形。
六、调整图片大小的注意事项
1. 始终保持宽高比： 除非特殊需求，否则在设置固定宽度或高度时，务必将另一项设置为 auto，或使用 object-fit，以免图片变形。
2. 避免缩放大图： 不要试图通过HTML或CSS将一张实际尺寸为2000px的大图缩小到200px来显示。这会浪费用户的带宽，拖慢页面加载速度。正确的做法是使用图像处理工具提前将图片裁剪或缩放到合适的尺寸。
3. 使用现代图片格式： 结合WebP等现代高压缩比格式，在保证画质的前提下减小图片体积，进一步提升网页性能。
总结
调整HTML图片大小的方法多种多样，简单的场景可以使用HTML原生的 width 和 height 属性来防止布局偏移；常规的布局调整推荐使用CSS样式表配合 max-width: 100% 实现响应式；而对于需要固定容器尺寸且不能变形的复杂场景，object-fit 属性则是最佳选择。掌握这些方法，能够让你在网页布局中更加游刃有余。