MrDoc文档系统新增百分比尺寸图片支持功能

功能背景

在文档编辑和排版过程中，图片尺寸的精确控制是一个常见需求。传统的图片尺寸设置通常采用固定像素值，但在响应式设计和多设备适配场景下，百分比尺寸支持显得尤为重要。MrDoc文档系统近期更新中，实现了对图片百分比尺寸的支持，为用户提供了更灵活的图片展示方案。

技术实现

MrDoc通过在图片URL后添加#size参数的方式支持图片尺寸设置。最新版本扩展了这一功能，允许用户使用百分比单位来指定图片尺寸。语法格式如下：

![](图片路径#size=宽度百分比x高度百分比)

其中：

• 宽度百分比可以是1%-100%之间的任意值
• 高度百分比同样支持1%-100%范围
• 两个百分比值之间用"x"连接

使用示例

1. 设置图片宽度为100%，高度自动调整：

![](/media/image.jpg#size=100%xauto)

2. 设置图片宽度为50%，高度为30%：

![](/media/image.jpg#size=50%x30%)

3. 混合使用百分比和固定像素值：

![](/media/image.jpg#size=80%x300)

技术优势

1. 响应式适配：百分比尺寸使图片能够根据容器大小自动调整，适应不同屏幕尺寸。

2. 布局灵活性：用户可以更精确地控制图片在文档中的占比，实现复杂的排版效果。

3. 兼容性设计：新功能保持了对原有固定像素尺寸设置的兼容，用户无需修改已有文档。

4. 简化工作流：无需针对不同设备准备多套图片尺寸，一套百分比设置即可满足多种场景。

应用场景

1. 移动端适配：在手机和平板上，百分比尺寸图片能更好地利用屏幕空间。

2. 多栏布局：在分栏文档中，使用百分比可以确保图片与栏宽保持协调比例。

3. 响应式主题：配合响应式主题使用时，图片能随主题布局变化自动调整。

4. 图文混排：精确控制图片与文字的比例关系，提升文档可读性。

注意事项

1. 百分比是相对于图片父容器的尺寸计算的，而非图片原始尺寸。

2. 当只指定一个维度（宽度或高度）时，建议使用"auto"保持图片原始比例。

3. 过小的百分比可能导致图片显示不清晰，建议结合图片原始分辨率合理设置。

4. 在打印场景下，百分比尺寸会基于打印页面的可用空间计算。

这一功能的加入使MrDoc在文档排版方面更加专业和灵活，满足了用户在不同场景下的图片展示需求，进一步提升了文档编辑体验。