图片大小控制功能使用指南

本知识库支持在Markdown文档中通过特殊语法来控制图片的显示大小，让你可以精确控制图片在页面中的展示效果。

🎯 支持的语法格式

1. 指定宽度和高度

![图片描述|300x200](./image.png)

设置图片宽度为300px，高度为200px
适用于需要精确控制图片尺寸的场景

2. 固定宽度，高度自适应

![图片描述|400x0](./image.png)

设置图片宽度为400px，高度按比例自适应
推荐用于保持图片原始比例的场景

3. 固定高度，宽度自适应

![图片描述|0x300](./image.png)

设置图片高度为300px，宽度按比例自适应
适用于需要统一高度的图片展示

4. 百分比宽度

![图片描述|50%](./image.png)

设置图片宽度为容器的50%
响应式友好，适应不同屏幕尺寸

5. 仅设置宽度

![图片描述|300](./image.png)

设置图片宽度为300px，高度自动
简化语法，适用于常见场景

📱 响应式特性

所有使用大小控制语法的图片都会自动获得响应式特性：

移动端优化：在小屏幕设备上自动调整为合适大小
最大宽度限制：图片不会超出容器宽度
比例保持：自动保持图片原始宽高比

🎨 视觉效果

图片会自动获得以下视觉增强：

圆角边框
阴影效果
居中显示
悬停交互效果（配合图片查看器）

💡 使用示例

示例1：展示不同尺寸的截图

# 界面截图对比

## 桌面版界面
![桌面版截图|600x400](./desktop-screenshot.png)

## 移动版界面  
![移动版截图|300x0](./mobile-screenshot.png)

示例2：并排显示小图标

# 技术栈图标

![Vue.js|80](./vue-logo.png) ![React|80](./react-logo.png) ![Angular|80](./angular-logo.png)

示例3：响应式图片展示

# 产品展示

![产品大图|80%](./product-hero.jpg)

细节图片：
![细节1|300x200](./detail1.jpg) ![细节2|300x200](./detail2.jpg)

⚠️ 注意事项

性能优化：大图片建议先压缩优化再使用
格式支持：支持常见图片格式（JPG、PNG、WebP、SVG等）
路径规则：遵循VitePress的静态资源路径规则
无障碍访问：记得提供有意义的alt文本描述

🔧 高级用法

与图片查看器结合

本功能与项目集成的vitepress-plugin-image-viewer完美兼容，点击图片可以全屏查看高清版本。

自定义样式

如需进一步自定义图片样式，可以在CSS中使用以下选择器：

.responsive-image {
  /* 自定义样式 */
}

📚 更多示例

查看项目中的实际使用示例：

现在你可以在任何Markdown文档中使用这些语法来精确控制图片大小，让文档的视觉表现更加专业和美观！

image size guide