在HTML中插入图片的基本方法是通过img标签，其中src属性指定图片文件的路径，alt属性提供图片无法显示时的替代文本。下面是插入一张图片的最简代码：
<img src="https://ippipp.com/images/photo.jpg" alt="示例图片">
但是这样显示的图片会保持原始尺寸，可能过大或过小，无法适应页面布局。因此需要调整图片大小。调整图片大小的方法主要有两种：在img标签中直接使用width和height属性，或者通过CSS的width和height属性来控制。下面详细介绍这两种方式。
使用img标签的width和height属性
在img标签中直接设置width和height属性是最简单的方式。这两个属性可以接受像素值或百分比值。下面是一个使用像素值的例子：
<img src="photo.jpg" alt="固定尺寸图片" width="300" height="200">
当width和height同时设置时，图片会被强制拉伸或压缩到指定尺寸，可能导致图片变形。如果只设置其中一个属性，另一个属性会根据原始宽高比自动调整。例如只设置宽度：
<img src="photo.jpg" alt="自动等比缩放" width="50%">
百分比是相对于父容器的宽度。需要注意的是，在img标签的属性中使用百分比时，width的百分比是相对于父元素的宽度，height的百分比是相对于父元素的高度。如果父元素没有明确高度设置，height百分比可能不会生效。
使用CSS的width和height属性
通过CSS来调整图片尺寸更加灵活，可以结合类名、ID或内联样式使用。推荐在样式表中定义，实现结构与表现分离。以下是内联样式的示例：
<img src="photo.jpg" alt="CSS控制尺寸" style="width:300px; height:200px;">
使用百分比时同样需要注意父容器尺寸：
<img src="photo.jpg" alt="CSS百分比" style="width:50%; height:auto;">
这里将height设置为auto，让浏览器自动根据原始宽高比计算高度，防止变形。更常见的做法是只设置width或max-width，让高度自动调整。
保持宽高比的推荐做法
为了避免图片变形，通常会采用只设置一个维度（通常是宽度），另一个维度使用auto的策略。结合max-width属性可以做到响应式：
<img src="photo.jpg" alt="响应式图片" style="max-width:100%; height:auto;">
这样图片会随着父容器宽度缩小而等比缩小，但不会超过原始尺寸。这是现代响应式网页设计的标准做法。也可以将上述样式定义在CSS中：
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
<img src="photo.jpg" alt="应用类" class="responsive-img">
使用object-fit控制图片填充方式
如果需要将图片强制放入一个固定尺寸的容器中，同时保持宽高比并使用裁剪或缩放，可以使用CSS的object-fit属性。类似background-size对背景图片的控制。
下面是一个示例，将图片放入200x200的矩形中，采用cover值进行裁剪填充：
<style>
.fit-cover {
width: 200px;
height: 200px;
object-fit: cover;
}
</style>
<img src="photo.jpg" alt="裁剪填充" class="fit-cover">
object-fit的可选值包括：fill（拉伸填充，默认）、contain（完整显示，可能有留白）、cover（裁剪填充，无留白）、none（保持原始尺寸）、scale-down（选择contain和none中较小的那个）。
同时也可以使用object-position来调整图片在容器中的对齐位置：
<style>
.fit-top {
width: 200px;
height: 200px;
object-fit: cover;
object-position: top;
}
</style>
<img src="photo.jpg" alt="顶部对齐裁剪" class="fit-top">
常见问题与注意事项
- 图片变形：通常是同时设置了width和height且值与原始宽高比不一致导致。解决办法是只设置一个维度，另一个使用auto。
- 百分比不生效：父容器没有明确高度时，height:100%可能无效。确保父元素有设定高度。
- 加载闪烁：如果图片尺寸未指定，在图片加载过程中页面布局会跳动。建议设置width和height或使用CSS占位。
- 优先级：CSS样式的优先级高于img标签内的属性。如果同时设置两者，CSS会覆盖标签属性。
- 单位选择：像素(px)用于固定尺寸，百分比(%)用于相对父容器，视口单位(vw/vh)用于相对视口尺寸。
综合示例
下面是一个综合使用img标签属性和CSS的对比示例，展示两种方法的区别：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片尺寸调整示例</title>
<style>
body { font-family: Arial; padding: 20px; }
.demo { margin-bottom: 20px; border: 1px solid #ccc; padding: 15px; width: 500px; }
.demo h3 { margin-top: 0; }
.img-attr { width: 200px; height: 150px; }
.css-cover { width: 200px; height: 150px; object-fit: cover; }
.responsive-max { max-width: 100%; height: auto; }
</style>
</head>
<body>
<h2>使用img标签属性</h2>
<div class="demo">
<h3>固定宽高（可能变形）</h3>
<img src="https://picsum.photos/800/600?random=2" width="200" height="150" alt="固定大小">
</div>
<div class="demo">
<h3>只设宽度，自动高度</h3>
<img src="https://picsum.photos/800/600?random=3" width="200" alt="等比缩放">
</div>
<h2>使用CSS属性</h2>
<div class="demo">
<h3>固定宽高（可能变形）</h3>
<img src="https://picsum.photos/800/600?random=4" class="img-attr" alt="CSS固定">
</div>
<div class="demo">
<h3>object-fit:cover裁剪</h3>
<img src="https://picsum.photos/800/600?random=5" class="css-cover" alt="裁剪填充">
</div>
<div class="demo" style="width:300px;">
<h3>响应式max-width:100%</h3>
<img src="https://picsum.photos/800/600?random=6" class="responsive-max" alt="响应式">
</div>
</body>
</html>
在实际开发中，尽量使用CSS方式控制图片尺寸，保持代码清晰。对于需要适配移动端的页面，务必使用max-width:100%加上height:auto的组合，确保图片不会超出屏幕宽度。
总结来说，插入图片并调整大小可以通过img标签属性快速实现，但需要留意变形问题；通过CSS属性可以更精细地控制响应式和裁剪行为。掌握这两种方法以及object-fit的高级用法，就能在各种布局场景下灵活处理图片展示。
HTML插入图片img标签调整图片大小CSS_widthCSS_height修改时间：2026-06-08 20:42:30