# 折叠屏展开态，页面下方按钮显示在视窗外

#### 问题现象

折叠屏展开态，部分带图片的页面，下方按钮显示在视窗外，无法点击。

#### 背景知识

*   Image组件的objectFit属性可设置图片的填充效果。其中ImageFit.Contain为保持宽高比进行缩小或者放大，使得图片或视频完全显示在显示边界内，对齐方式为水平居中，ImageFit.Cover为保持宽高比进行缩小或者放大，使得图片或视频两边都大于或等于显示边界，对齐方式为水平居中。
*   Scroll组件：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

#### 问题定位

1.  查阅页面代码中Image组件的objectFit属性是否为ImageFit.Contain或ImageFit.Cover，使得图片能够保持宽高比缩放。
2.  查阅页面代码中Image组件是否在Scroll容器中。

#### 分析结论

页面代码中Image组件的objectFit属性为ImageFit.Contain或ImageFit.Cover，折叠屏展开后，屏幕宽度变大，Image组件的宽度变大，图片的宽度也会变大，在图片宽高比不变的情况下，图片高度也会变大，如果外层没有Scroll组件，就会把下面的按钮挤到屏幕外。

#### 修改建议

在页面内容区加层Scroll组件，把Image组件嵌套在里面，保证图片尺寸变大的时候能够上下滑动，避免把下面的组件挤到屏幕外。可参考官方Scroll的基本使用示例。