HTML / CSS Запросы медиа заголовка - PullRequest
Новая
       4

HTML / CSS Запросы медиа заголовка

1 голос
/ 21 января 2020

Я создал веб-сайт портфолио и имею некоторые проблемы с изображением заголовка. На экране смартфона и IPAD полное изображение заголовка не должно отображаться - и это работает. На моем мониторе P C (24 дюйма) он также работает. Но на моем ноутбуке (15 дюймов) заголовок изображения изолирован. Вы можете видеть только 40% изображения. (Снимок экрана с пояснениями следующий)

Header image

1) Это изображение всего заголовка. Черный фон и номер 3) - это одно изображение заголовка.

2) Просто обычный текст в заголовке (неважно) 

.hero_section {
  background-image: url(https://placekitten.com/1920/1080);
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
}
<section id="home" class="hero_section bd-bottom">
  <div class="display-table">
    <div class="table-cell">
    </div>
  </div>
</section>

Теперь я хочу, чтобы изображение полностью отображалось и на 15-дюймовых мониторах. Я дал изображение: width: 100%;, чтобы оно работало нормально.

Там есть ссылка на точное мое изображение. Нажмите этот

Ответы [ 2 ]

2 голосов
/ 21 января 2020

Вот что я бы сделал: 

.hero_section {
  background-image: url(https://www.bilder-upload.eu/upload/c49546-1579636812.jpg);
  background-repeat: no-repeat;
  background-position: center right;
  width: 100%;
  height: 100vh;
}

@media screen and (max-width: 992px) {
   .hero_section {
      background-image: none;
      background-color: #000;
}
<section id="home" class="hero_section bd-bottom">
  <div class="display-table">
    <div class="table-cell">
    </div>
  </div>
</section>

Это должно сделать ваше background-image всегда выровненным вправо, так как ваш основной объект (парень держит камеру) выровнен таким образом. А когда у вас маленький экран (планшеты или меньше), вы убираете background-image и добавляете черный фон (настраивайте шестнадцатеричный цвет по мере необходимости)

0 голосов
/ 21 января 2020

попробуйте добавить что-то вроде этого 

.hero_section{
  background-size: cover;
}
...