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

Question

我正在尝试为我的登录页面设置背景图片，一些基本的东西。但是当按下其中一个输入并显示键盘时，图像会调整大小（缩小）

我的背景图片位于 div 标签中，我尝试将图片放在 ion-content 标签中，虽然它解决了键盘问题，但随后图片被放大太多了。我尝试使用 ion-view 标签，但随后出现以下错误

.... error: Template parse errors: 'ion-view' is not a known element:

这是我的 html 代码（虽然是一些基本的东西）

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

</form>

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

这是我的背景 class：

.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;}

Answer 1

我认为您需要定位 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);
}

并且没有注意到任何显示问题。因此，您可以像这样将背景代码片段放入 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 版本，否则您会遇到更多困难。

Answer 2

试试这个

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

Answer 3

我试过了，终于成功了，谢天谢地，我更改了 bg 中的一些属性 class，这里是更改

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

Answer 4

将此添加到 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>

如果这不起作用，请在将上述代码添加到 config.xml 后尝试 removing/adding android 平台：

cordova platform rm android
cordova platform add android

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

Answer 5

这个解决方案对我来说似乎没有任何问题。

首先找到你的 AndroidManifest.xml (platforms/android/app/src/main/AndroidManifest.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 值更改为“adjustPan”。

android:windowSoftInputMode="adjustPan"

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

IONIC4 Background image is resized when keyboard is open

ionic-framework

ionic4