diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index 009aea455f..02e176e9d5 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -26,7 +26,8 @@ const screenAdaptorList = [
   { label: t('visualization.screen_adaptor_width_first'), value: 'widthFirst' },
   { label: t('visualization.screen_adaptor_height_first'), value: 'heightFirst' },
   { label: t('visualization.screen_adaptor_full'), value: 'full' },
-  { label: t('visualization.screen_adaptor_keep'), value: 'keep' }
+  { label: t('visualization.screen_adaptor_keep'), value: 'keep' },
+  { label: t('visualization.screen_adaptor_keep_proportion'), value: 'keepProportion' }
 ]
 const init = () => {
   nextTick(() => {
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index 9c2cb3c98a..3de085d374 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -199,6 +199,11 @@ const canvasStyle = computed(() => {
       style['height'] = canvasStyleData.value?.height + 'px'
       style['width'] = canvasStyleData.value?.width + 'px'
       style['margin'] = 'auto'
+    } else if (canvasStyleData.value?.screenAdaptor === 'keepProportion') {
+      style['aspect-ratio'] = canvasStyleData.value?.width / canvasStyleData.value?.height
+      style['height'] = canvasStyleData.value?.height + 'px'
+      style['width'] = canvasStyleData.value?.width + 'px'
+      style['margin'] = 'auto'
     } else {
       style['height'] = dashboardActive.value
         ? downloadStatus.value
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 7aa35d6224..d20c5e6153 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -3135,6 +3135,7 @@ export default {
     screen_adaptor_width_first: 'Width First',
     screen_adaptor_height_first: 'Height First',
     screen_adaptor_full: 'Full Screen',
+    screen_adaptor_keep_proportion: 'Keep Proportion:',
     screen_adaptor_keep: 'No Scaling',
     effective_during_preview: 'Effective during preview',
     base_config: 'Base Configuration',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 39253352da..1789ef88fa 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -3049,6 +3049,7 @@ export default {
     screen_adaptor_width_first: '寬度優先',
     screen_adaptor_height_first: '高度優先',
     screen_adaptor_full: '鋪滿全屏',
+    screen_adaptor_keep_proportion: '保持比例填充',
     screen_adaptor_keep: '不縮放',
     effective_during_preview: '預覽時生效',
     base_config: '基礎配置',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 22a86fc046..8bedcb0308 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -3052,6 +3052,7 @@ export default {
     external_parameter_settings: '外部参数设置',
     screen_config: '大屏配置',
     screen_adaptor: '缩放方式',
+    screen_adaptor_keep_proportion: '保持比例填充',
     screen_adaptor_width_first: '宽度优先',
     screen_adaptor_height_first: '高度优先',
     screen_adaptor_full: '铺满全屏',
diff --git a/core/core-frontend/src/views/data-visualization/DvPreview.vue b/core/core-frontend/src/views/data-visualization/DvPreview.vue
index b0c4edabd3..e6066e4852 100644
--- a/core/core-frontend/src/views/data-visualization/DvPreview.vue
+++ b/core/core-frontend/src/views/data-visualization/DvPreview.vue
@@ -54,6 +54,8 @@ const contentInnerClass = computed(() => {
     return 'preview-content-inner-full'
   } else if (props.canvasStylePreview.screenAdaptor === 'keep') {
     return 'preview-content-inner-size-keep'
+  } else if (props.canvasStylePreview.screenAdaptor === 'keepProportion') {
+    return 'preview-content-inner-keep-proportion'
   } else {
     return 'preview-content-inner-width-first'
   }