html缩小图片代码

使用HTML属性设置宽高

通过width和height属性直接定义图片尺寸，适用于固定尺寸场景。

CSS样式控制尺寸

推荐使用CSS实现更灵活的布局和响应式设计。

“` | 通过CSS类控制宽度，`height: auto`确保比例不变 |

使用max-width限制最大尺寸

防止图片超过指定宽度,同时保持原始比例。

img.limit-size {
max-width: 100%; / 不超过父容器宽度 /
height: auto;
}

 方法四：响应式图片（`<picture>`）
根据屏幕尺寸加载不同分辨率图片。
| 代码示例 | 说明 |
|---|---|
| ```html
<picture>
    <source media="(min-width: 800px)" srcset="image-large.jpg">
    <source media="(min-width: 400px)" srcset="image-medium.jpg">
    <img src="image-small.jpg" alt="响应式图片">
</picture>
``` | 通过`<picture>`和`srcset`实现多图适配 |
 注意事项
1. 保持比例：建议始终设置`height: auto`或使用`object-fit`属性
2. 图片压缩：使用工具（如TinyPNG）压缩图片文件大小
3. 格式选择：优先使用WebP格式（需考虑浏览器兼容性）
4. 懒加载：添加`loading="lazy"`属性提升页面性能
 相关问题与解答
Q1：如何让图片缩小后不变形？  
A1：需保持宽高比例，推荐两种方式：  
仅设置`width`或`height`，另一属性设为`auto`  
使用CSS的`object-fit: contain`（需将`<img>`转为`<div>`内的背景图）
Q2：如何实现图片随窗口大小自动缩放？  
A2：组合使用响应式单位和最大宽度限制：  
```css
.responsive-img {
    max-width: 100%; / 不超过容器宽度 /
    height: auto;    / 自动计算高度 /
}