feat: Add support for percentage-based image dimensions and update web app dependencies.

Author: vace

README-zh.md

@@ -209,10 +209,11 @@ const imageAdapter: (token: Tokens.Image) => Promise<null | MarkdownImageItem>
 
 ### 自定义图片尺寸
 
-您可以在 Markdown 图片的 title 属性中指定自定义尺寸，格式为 `宽度x高度`（例如 `600x400`）。这将覆盖图片的原始尺寸，在生成的 DOCX 文档中使用自定义尺寸渲染图片。这对于控制图片大小和避免超出 Word 的最大宽度限制非常有用。
+您可以在 Markdown 图片的 title 属性中指定自定义尺寸，格式为 `宽度x高度`（例如 `600x400`, `30%x30%`）。这将覆盖图片的原始尺寸，在生成的 DOCX 文档中使用自定义尺寸渲染图片。这对于控制图片大小和避免超出 Word 的最大宽度限制非常有用。
 
 ```markdown
 ![Alt text](image.png "600x400")
+![Alt text](image.png "30%x30%")
 ```
 
 自定义尺寸将应用于生成的 DOCX 文件中的图片，而原始图片数据保持不变。

README.md

@@ -318,10 +318,11 @@ const imageAdapter: (token: Tokens.Image) => Promise<null | MarkdownImageItem>
 
 ### Custom Image Size
 
-You can specify custom image dimensions in the Markdown image title attribute using the format `widthxheight` (e.g., `600x400`). This will override the original image dimensions when rendering in the DOCX document, which is useful for controlling image size and avoiding Word's maximum width constraints.
+You can specify custom image dimensions in the Markdown image title attribute using the format `widthxheight` (e.g., `600x400` or `30%x30%`). This will override the original image dimensions when rendering in the DOCX document, which is useful for controlling image size and avoiding Word's maximum width constraints.
 
 ```markdown
 ![Alt text](image.png "600x400")
+![Alt text](image.png "30%x30%")
 ```
 
 The custom dimensions will be applied to the image in the generated DOCX file, while the original image data remains unchanged.

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "web",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,6 +17,6 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "markdown-docx": "^1.5.0"
+    "markdown-docx": "^1.5.1"
   }
 }

web/pnpm-lock.yaml

@@ -34,10 +34,14 @@ Welcome to the Markdown to DOCX converter! This tool allows you to:
 - [ ] this is an incomplete item
 
 ## Images
+Images are fully supported, including specifying dimensions (e.g., `64x64`), scaling percentages (e.g., `30%x30%`), and WebP format.
 
-Here's our logo (hover to see the title text):
+Here are some examples:
+
+![alt text](pull-shark.png "64x64")
+
+![alt text](starstruck.png "30%x30%")
 
-![alt text](https://img.alicdn.com/imgextra/i3/O1CN012ZjB2y1xHUf6OzZ8C_!!6000000006418-2-tps-104-126.png "Logo Title Text 1")
 ![webp Support](./webp.webp "Logo Title Text 1")