CSS и Bootstrap - полное изображение страницы не работает - PullRequest
Новая
       1

CSS и Bootstrap - полное изображение страницы не работает

0 голосов
/ 14 сентября 2018

Итак, я пытаюсь сделать так, чтобы на странице отображалось полное изображение страницы, и оно быстро изменяло размеры на разных экранах, чтобы оно всегда занимало весь экран.Я посмотрел на w3schools и другие вопросы по Stack, но, похоже, что независимо от того, что я делаю, это никогда не работает, я проверял, не перезаписывает ли что-то мой CSS в инструментах разработчика браузера, но кажется, что в этом нет ничего плохого, просто это не так.Работа.Я использую bootstrap, и div, фоновое изображение которого должно быть полной страницей, является col-12, это вызовет проблему?Это мой CSS: 

body, html {
    height: 100%;
}

#image-div {
    background-image: url("paper.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    color: white;
    background-color: rgba(0,0,0,0.5);
    background-blend-mode:darken !important; 
    font-size: 20px;
}

и HTML: 

<div className="row" id="calculator-row">
          <div className="col-12" id="image-div">
            <div className="over-image">
              <p class="try-calculator">
               Calculate the possible return of investments
              </p>
            </div>
          </div>
          <div className="col-12" id="calculator-div">
            <h1>Return of Investments</h1>
            <BenefitCalculator />
                <strong>*The average conversion percent is 4, but enter yours in case you know it</strong>
          </div>
        </div>

РЕДАКТИРОВАТЬ: забыл упомянуть, что я также использую REACTJS

Ответы [ 3 ]

0 голосов
/ 14 сентября 2018

просто добавьте класс ниже к родительскому div изображения, он будет масштабироваться в соответствии с размерами экрана..img-responseive -> Делает изображение отзывчивым (хорошо масштабируется по отношению к родительскому элементу).

0 голосов
/ 14 сентября 2018

Попробуйте backgound-size: cover, contain; Если это не работает, отправьте пример своего кода.Также высота в процентах всегда плохая идея.Если это для того, чтобы элемент был таким же высоким, как страница, используйте 100vh или какой-либо другой метод.Также обратите внимание, что вам, вероятно, понадобится медиа-запрос для портретной и альбомной ориентации.

0 голосов
/ 14 сентября 2018

Попробуйте этот фрагмент: 

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.row-fw {
  width: 100vw;
  height: 100vh;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

#image-div {
  background-image: url("https://placekitten.com/g/1920/1080");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  display: block;
  width: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: darken !important;
  font-size: 20px;
}
<html>

<body>
  <div class="row row-fw">
    <div id="image-div"></div>
  </div>
</body>

</html>

Вы также можете использовать height: 100vh; & width: 100vw; (vw = ширина области просмотра, vh = высота области просмотра).

Еслиродительский становится больше, чем размер вашего экрана, как и фон.100vw & 100vh будет использовать только ширину и высоту области просмотра.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...