сделать фоновое изображение отзывчивым для мобильных макетов, но держать его в фиксированном положении - PullRequest
Новая
       22

сделать фоновое изображение отзывчивым для мобильных макетов, но держать его в фиксированном положении

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

Как мне сделать мое фоновое изображение раздела отзывчивым на изменения размера браузера? Например, изображение имеет размер 1280x768, если браузер находится в полноразмерном режиме (2540x1440), как только я изменю размер окна до значения меньше 1280, оно должно начать уменьшаться, но пропорционально. как я бы изменил размер в Adobe Photoshop с ограничением пропорций.

на данный момент мой HTML-код выглядит следующим образом: 

<!-- Header -->
<header class="masthead bg-head text-white text-center">
  <div class="container">
    <h1 class="text-uppercase mb-0">My Name</h1>
    <img class="img-fluid" src="img/star-light.png" alt="">
    <h2 class="font-weight-light mb-0">Issue Solving</h2>
  </div>
</header>

и css-код, который я играю в течение последнего часа: 

@media (min-width: 992px) {
  header{
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    margin-top: 71px;
    padding-top: 96px;
    height: 25rem;
    width: 1280px;
  }
}

Это выглядит следующим образом: enter image description here

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

1 Ответ

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

Во-первых: вам не нужно делать это в запросе @media:)

Второе: вы использовали фиксированную ширину и высоту. Это означает, что он всегда будет такого размера, независимо от размера браузера.

Итак, давайте подойдем к этой проблеме без запроса @media, и вместо фиксированных пропорций мы будем использовать единицы просмотра. 

header{
    background-color: #4a4a4a;
    background-image: url("../img/background-bern-4.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    margin-top: 71px;
    padding-top: 96px;
    height: 20vh;
    width: 100vw;
  }

Изменение его на vw и vh сделает его отзывчивым. Вы можете добавить max-width: 1280px, чтобы заголовок не был больше, чем на любом большом экране.

...