上一篇
html图片等比缩小
使用CSS设置图片宽高，保持比例，如width:100%; height:auto;或max-width配合等比缩
实现方式与代码示例
使用HTML属性控制尺寸
直接在<img>标签中设置width或height属性，浏览器会自动计算另一维度保持比例。
| 方法 | 代码示例 | 说明 |
|---|---|---|
| 设置宽度 | <img src="image.jpg" width="300" /> | 指定宽度，高度自动按比例缩小 |
| 设置高度 | <img src="image.jpg" height="200" /> | 指定高度，宽度自动按比例缩小 |
注意：只能设置宽度或高度中的一个，避免同时设置导致拉伸。
使用CSS样式控制尺寸
通过CSS的width或height属性配合auto值，实现等比缩放。
| 方法 | 代码示例 | 说明 |
|---|---|---|
| 内联样式 | <img src="image.jpg" style="width:50%;height:auto;" /> | 宽度设为父元素50%，高度自动 |
| 内部样式表 | css .responsive-img { width: 100px; height: auto; } | 固定宽度100px，高度自动 |
| 外部样式表 | css #profile-pic { max-width: 200px; height: auto; } | 最大宽度200px，超出则等比缩小 |
关键属性：
width或height设为具体值或百分比- 另一维度必须设置为
auto - 推荐使用
max-width防止过大图片撑破布局
响应式图片处理
使图片在不同设备上自适应容器大小。
| 方法 | 代码示例 | 适用场景 |
|---|---|---|
| 百分比宽度 | <img src="image.jpg" style="width:100%;height:auto;" /> | 宽度铺满容器，手机端自动缩小 |
| 媒体查询 | css @media (max-width: 768px) { .img-fluid { width: 80%; } } | 屏幕小于768px时宽度80% |
picture元素 | html <picture> <source media="(max-width: 600px)" srcset="small.jpg"> <img src="large.jpg" alt=""> </picture> | 根据设备分辨率加载不同图片 |
背景图片等比缩小
通过CSS背景属性控制图片比例。
| 方法 | 代码示例 | 效果 |
|---|---|---|
background-size: contain | div { background-image: url(bg.jpg); background-size: contain; width: 300px; height: 200px; } | 等比缩放，完整显示（可能留白） |
background-size: cover | div { background-image: url(bg.jpg); background-size: cover; width: 300px; height: 200px; } | 等比缩放，铺满容器（可能裁剪） |
常见问题与解答
Q1：为什么设置width和height后图片会变形？
A1：同时强制设置宽高会破坏原始比例，正确做法是只设置其中一个值，另一个设为auto。width: 300px; height: auto;
Q2：如何让图片在不超过容器的情况下等比缩小？
A2：使用max-width和max-height配合auto值。css img.responsive { max-width: 100%; max-height: 500px; width: auto; height: auto; }
这样图片会在宽度不超过100%、高度不超过50
