Question

我正在研究ionic3应用程序。一切都很好，除了在输入中使用键盘或输入被聚焦时，背景图像会调整大小，这会使视图变得恐怖。我在谷歌上搜索了很多，在论坛上发现了以下问题。不幸的是，他们在ionic3中没有为我工作。

image resize in ionic。 image resize in ionic 现在，我将提供一些代码。

<ion-header>
  <ion-navbar>
    <ion-title>
      ورود به حساب
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="login">
    <div class="login-form">
      <ion-grid>
        <ion-row>
          <ion-col col-sm-12>
            <ion-list inset>
              <ion-item>
                <ion-label ionitron-bot>
                  <ion-icon name="person"></ion-icon>
                </ion-label>
                <ion-input
                  [(ngModel)]="phone"
                  type="tel"
                  placeholder="794737444"
                ></ion-input>
              </ion-item>
            </ion-list>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-sm-12></ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</ion-content>
**

Scss样式代码。

page-new-user {
    ion-content{
        height: 100%;
    }
  div.login {
    width: 100%;
    height: 100%;
    background: url("../../../assets/imgs/bg-01.jpg") no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    height: 100%;
    div.login-form {
      width: 50%;
      height: auto;
      margin: auto;
      background-color: #ddd;
    }
  }
}

现在我将提供该应用程序的屏幕截图。

before focus after focus

Answer 1

mysql-sql> select * from sakila.actor limit 3;
+----------+-------------+----------------+----------------------+
| actor_id | first_name  | last_name      | last_update          |
+----------+-------------+----------------+----------------------+
|        1 | PENELOPE    | GUINESS        | 2006-02-15 4:34:33   |
|        2 | NICK        | WAHLBERG       | 2006-02-15 4:34:33   |
|        3 | ED          | CHASE          | 2006-02-15 4:34:33   |
+----------+-------------+----------------+----------------------+

应修复此添加到离子含量中的ion-content{ height: 100%; .scroll-content{ padding-bottom: 0px !important; } } div.login { width: 100%; height: 100%; background: url("../../../assets/imgs/bg-01.jpg") no-repeat; background-size: cover; background-position: 100% 100%; height: 100%; div.login-form { width: 50%; height: auto; margin: auto; background-color: #ddd; } }，以阻止离子共焦组件更改其填充。

调整背景图片的大小会更改android

1 个答案: