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 6952f7eac2..856f2effd7 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -180,6 +180,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 b2d0a9b23b..4bd50821f5 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -3131,6 +3131,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 a8560b9106..00776e833b 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -3045,6 +3045,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 0f2251b825..e3fc49d34e 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -3048,6 +3048,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/style/index.less b/core/core-frontend/src/style/index.less
index 34c80a35ea..84282b35e2 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -600,6 +600,14 @@ strong {
   overflow-y: auto;
 }
 
+.preview-content-inner-keep-proportion {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .preview-content-inner-height-first {
   width: auto;
   height: 100%;
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'
   }