diff --git a/docs/.vitepress/src/assets/style/markdown.scss b/docs/.vitepress/src/assets/style/markdown.scss
index 3860057856c3212826d328bab94ba800fa13a29e..e00df629c6c0ac89d28fdc8824fcf375a71d6bbe 100644
--- a/docs/.vitepress/src/assets/style/markdown.scss
+++ b/docs/.vitepress/src/assets/style/markdown.scss
@@ -331,6 +331,7 @@
 
   .img-expand {
     width: auto;
+    max-width: min(936px, 100%);
     position: relative;
     display: inline-block;
     padding: var(--o-gap-2);
diff --git a/docs/.vitepress/src/layouts/LayoutDoc.vue b/docs/.vitepress/src/layouts/LayoutDoc.vue
index c7855680251359da7b619b34fdc14a1501e24321..e9abc23c1902fb4576fbc4a46dd6df85c0a5b59b 100644
--- a/docs/.vitepress/src/layouts/LayoutDoc.vue
+++ b/docs/.vitepress/src/layouts/LayoutDoc.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, computed, onUpdated, watch } from 'vue';
+import { onMounted, onUnmounted, ref, computed, onUpdated, watch, nextTick } from 'vue';
 import { storeToRefs } from 'pinia';
 import { Content, useRouter, useRoute, useData } from 'vitepress';
 import {
@@ -399,7 +399,7 @@ const zoomVisible = ref(false);
 const zoomWidth = ref(0);
 const zoomHeight = ref(0);
 
-onMounted(() => {
+const imgInit = () => {
   const imgDom = document.querySelectorAll('.markdown-body img');
   imgDom.forEach((img) => {
     const image = new Image();
@@ -419,8 +419,21 @@ onMounted(() => {
       }
     };
   });
+};
+
+onMounted(() => {
+  imgInit();
 });
 
+watch(
+  () => route.path,
+  () => {
+    nextTick(() => {
+      imgInit();
+    });
+  }
+);
+
 const closeZoomBtn = () => {
   zoomVisible.value = false;
 };
@@ -971,6 +984,7 @@ const readyVisible = ref(false);
   overflow: hidden;
   background-color: #fff;
   max-width: calc(100vw - 80px);
+  max-height: calc(100vh - 100px);
 
   &::before {
     position: absolute;