Question

我正在尝试为我的登录页面设置背景图片，这是一些基本内容。但是，当按下其中一个输入并显示键盘时，图像将被调整大小（以较小的尺寸）

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

....错误：模板解析错误：'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;}

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

并且没有发现任何显示问题。因此，您可以将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版本，否则您将陷入困境。

Answer 2

尝试一下

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

Answer 3

我尝试了一下，终于成功了，谢天谢地，我在bg类中更改了一些属性，这是更改

.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后尝试删除/添加android平台：

cordova platform rm android
cordova platform add android

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

Answer 5

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

首先找到您的AndroidManifest.xml（平台/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打开键盘时调整背景图像的大小

5 个答案: