IONIC4键盘打开时背景图像大小调整

ecr0jaav  于 2023-01-28  发布在  Ionic
关注(0)|答案(5)|浏览(135)

我试图设置一个背景图片到我的登录页面,一些基本的东西。但当其中一个输入被按下,键盘显示的图像得到调整大小(到一个小尺寸)
我的背景图像位于div标签中,我尝试将图像放入ion-content标签中,虽然它解决了键盘问题,但图像放大太多。我尝试使用ion-view标签,但出现以下错误
....错误:模板解析错误:“离子视图”不是已知元素:
这是我的html代码(虽然是一些基本的东西)

<div class="bg">
<form #form="ngForm" (ngSubmit)="login(form)">

</form>

<ion-label ... ></ion-label> 
</div>

下面是我的bg类:

.bg{
padding-bottom: 0 !important;
background-image: url('../../assets/lock.png') !important;
height: 100% !important;
width: 100% !important;
background-repeat: no-repeat;
background-image: cover !important;
background-size: cover !important;
background-position: center; 
background-attachment: fixed;}
icnyk63a

icnyk63a1#

"试试这个"

ion-content { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}
bsxbgnwa

bsxbgnwa2#

这个解决方案似乎对我很有效,没有任何问题。
首先找到您的Android清单. xml(平台/安卓/应用程序/源代码/主文件/Android清单. xml)
在那里找到这一行:

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">

在其中将android:windowSoftInputMode值更改为“调整平移”。
android:窗口软输入模式=“调整平移”

wmomyfyw

wmomyfyw3#

我认为您需要针对ion-content标记。
回顾我做的一个有渐变背景的项目,我使用了这个:

@mixin linearGradient($top, $bottom){
  background: $top; /* Old browsers */
  background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
  background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

ion-content {
  @include linearGradient($brand-beer, $brand-darkbeer);
}

并且没有注意到任何显示问题,所以你可以把bg代码段放到ion-content sass行中,如下所示:

ion-content {
    padding-bottom: 0 !important;
    background-image: url('../../assets/lock.png') !important;
    height: 100% !important;
    width: 100% !important;
    background-repeat: no-repeat;
    background-image: cover !important;
    background-size: cover !important;
    background-position: center; 
    background-attachment: fixed;
}

我不知道你是从哪里得到ion-view的。快速搜索一下,似乎这个版本从v1开始就没有出现在Ionic中。它在各个版本中经历了一些重大的变化,所以你应该总是确保你正在阅读的帮助是针对你正在使用的Ionic版本的,否则你会更加困惑。

vq8itlhq

vq8itlhq4#

通过将其添加到config.xml中,应该可以解决此问题,而无需使用css技巧:

<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity[@android:name='MainActivity']">
    <activity android:name="MainActivity" android:windowSoftInputMode="adjustPan" />
</edit-config>

如果这不起作用,尝试删除/添加Android平台后,添加上述代码到config.xml:

cordova platform rm android
cordova platform add android

或将“文件”属性更改为:file="app/src/main/AndroidManifest.xml"并重建应用程序。

lndjwyie

lndjwyie5#

在我的bg类中修改了一些属性:

.bg{
    padding-bottom: 0 !important;
    background-image: url('../../assets/lock.png') !important;
    height: 100% auto !important;
    background-repeat: no-repeat;
    background-image: cover !important;
    background-size: cover !important;
    background-position: center;
    position: fixed;
}

相关问题