Как сделать так, чтобы изображение заполняло левую часть экрана в bootstrap 4? - PullRequest
Новая
       5

Как сделать так, чтобы изображение заполняло левую часть экрана в bootstrap 4?

0 голосов
/ 22 апреля 2020

Я пытаюсь создать пользовательскую страницу входа в систему bootstrap.

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

У меня проблема в том, что изображение отображается не полностью, а вместо этого "обрезается", когда форма заканчивается.

Здесь мой html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 background_image">
        </div>
        <div class="col-md-6">
            <!-- LOGIN FORM HERE -->
        </div>
    </div>
</div>

Я пробовал это CSS, но безрезультатно. 

.background_image{
  background-image: url(/static/picture.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
}

Вот изображение, чтобы попробовать и объясните лучше:

image

Как я могу получить его так, чтобы весь левый экран был заполнен моим изображением?

1 Ответ

0 голосов
/ 22 апреля 2020

Возможно, вам потребуется установить высоту контейнера. Не уверен, что он вложен в другой контейнер, но в любом случае, возможно, попробуйте: 

<div class="container-fluid mh-100">

, если вы хотите / хотите, чтобы он был в полный рост и использовал Bootstrap 4, если не другой подход с CSS будет : 

.container-fluid {
  height:100vh;
}

Или установите высоту DIV с изображением на то, что вам нужно, чтобы оно было 

.background_image{
  ...
  height:200px;
}
...