diff --git a/entry/src/main/ets/pages/AutoImageFit.ets b/entry/src/main/ets/pages/AutoImageFit.ets
index 3dc52d4..d5e0c7d 100644
--- a/entry/src/main/ets/pages/AutoImageFit.ets
+++ b/entry/src/main/ets/pages/AutoImageFit.ets
@@ -12,49 +12,47 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  ImageKnifeComponent,
-  ImageKnifeData,
-  ImageKnifeRequest, LogUtil
-} from '@ohos/libraryimageknife';
+import { ImageKnifeComponent } from '@ohos/libraryimageknife';
+import { display } from '@kit.ArkUI';
 
 @Entry
 @Component
 struct AutoImageFit {
-  @State width1: Length = '100%'
+  @State imageWidth: number = 200;
+  private maxWidth: number = px2vp(display.getDefaultDisplaySync().width);
 
   build() {
-    Scroll() {
+
+    Column() {
+      this.Slider()
       Column() {
-        Button($r('app.string.adjust_size')).onClick(() => {
-          if (this.width1.toString() == '100%') {
-            this.width1 = '60%'
-          } else {
-            this.width1 = '100%'
-          }
-        }).width('100%')
         Text('Image')
-        Image('https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg').width('100%').objectFit(ImageFit.Auto)
+        Image('https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg')
+          .width('100%')
+          .objectFit(ImageFit.Auto)
         Text('ImageKnife')
         ImageKnifeComponent({
           imageKnifeOption: {
             loadSrc: 'https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg',
             objectFit: ImageFit.Auto,
-            onLoadListener: {
-              onLoadStart: (request?: ImageKnifeRequest) => {
-                LogUtil.info('onLoadStart')
-              },
-              onLoadSuccess: (data: string | PixelMap | undefined, imageKnifeData: ImageKnifeData,
-                request?: ImageKnifeRequest) => {
-                LogUtil.info('onLoadSuccess')
-              }
-            }
           }
         }).width('100%')
-
-      }.width(this.width1).border({ width: 1 })
+      }.width(this.imageWidth).border({ width: 1 })
     }
   }
-}
-
 
+  @Builder
+  Slider() {
+    Slider({
+      value: this.imageWidth,
+      min: 100,
+      max: this.maxWidth,
+      style: SliderStyle.OutSet
+    })
+      .blockColor(Color.White)
+      .width('100%')
+      .onChange((value: number) => {
+        this.imageWidth = value;
+      })
+  }
+}
\ No newline at end of file