Как сделать загрузочную карту на всю высоту компонента?

Question

Я хочу, чтобы мой экран входа в систему представлял собой карту размером с весь экран с фоновым изображением и наложением.Когда я настраиваю размер браузера, я вижу пустое пространство под изображением.Я хочу, чтобы изображение соответствовало размеру браузера.

<div class="card text-white">
    <img class="card-img" src="../../../assets/login-image/home.jpg">
    <div class="card-img-overlay">
          <div class="display-4 title">Acqusitions</div>
      <div class="card-body">
        <div class="container">
          <div class="row">
            <div class="col-md-8">
            </div>
            <div class="col-md-4">
              <div>
                <h2 class="card-title">Login</h2>
                <div class="forms">
                  <div class="card-text input-group input-group-lg username">
                    <input type="text" class="form-control" placeholder="Username" [(ngModel)]="username">
                  </div>
                  <div class="card-text input-group input-group-lg password">
                    <input type="password" class="form-control" placeholder="Password" [(ngModel)]="password">
                  </div>
                  <div class="text-center buttonPad">
                    <button type="button" class="btn btn-primary btn-lg" (click)="loginUser(username, password)">Submit</button>
                  </div>
                  <div *ngIf="loginError" class="padTop" class="alert alert-danger" role="alert">
                    {{errMessage}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

.card {
  height: 100vh;
}

также убедитесь, что у вас установлен <meta name="viewport" content="width=device-width, height=device-heigth, initial-scale=1">, чтобы ваш браузер мог получить размеры области просмотра и применить это к контенту. Вы также можете добавить базовую 100vh к body (использовать класс вместо тега html для добавления стилей), а затем использовать height: 100% при необходимости.

Проблема с чрезмерной зависимостью от начальной загрузки (особенно если вы новичок) заключается в том, что правила CSS становятся запутанными (поскольку стиль мышления начальной загрузки отличается от стиля CSS). Я бы посоветовал вам попробовать сделать некоторые вещи, включенные в класс boostrap, самостоятельно (а затем вручную), а затем использовать bootstrap как средство экономии времени вместо того, чтобы использовать его, потому что это проще. Вы должны знать, что он делает и как.

Мне лично не нравится начальная загрузка, потому что некоторые вещи не могут быть переопределены без использования «Важно», что ужасно, или без инкапсуляции, но это личное и не по теме. Надеюсь, это поможет!