Css - как остановить растрескивание изображения с размером обложки? - PullRequest
Новая
       14

Css - как остановить растрескивание изображения с размером обложки?

0 голосов
/ 31 января 2019

Я создаю простой носитель для экранов шириной более 2560 пикселей.Моя проблема в том, что у меня есть заголовок и более 2600px я устанавливаю статическую ширину для моего заголовка, когда я изменяю размер окна более 2600px заголовок имеет ширину 2600px, но размер изображения изменяется.Как установить размер изображения относительно ширины заголовка, а не ширины экрана ?? 

#header {
  position: relative;
  height: 100vh;
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('~/images/17.jpg');
    background-size: cover;
    background-attachment: fixed;
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
  }
}
@media only screen and (min-width: 2600px) {
  #header {
    width: 2600px;
    margin: 0 auto;
    height: 1000px;
    .background-image {
      width: 2600px;
    }
  }
}

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Проблема с background-attachment: fixed;, которая заставляет фон масштабироваться с окном просмотра.Согласно MDN ,

Фон фиксируется относительно области просмотра.Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом.(Это не совместимо с background-clip: text.)

И, очевидно, также не совместимо с background-size: cover.

Решение: сбросьте background-attachment в медиа-запросе.

Вот codepen с решением.
Или, для людей, которые предпочитают фрагменты, фрагмент (только с скомпилированным SCSS). 

body {
  margin: 0;
}

#header {
  position: relative;
  height: 100vh;
}
#header .background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("https://placehold.it/900x300");
  background-size: cover;
  background-attachment: fixed;
  filter: brightness(50%);
  -webkit-filter: brightness(50%);
}

@media only screen and (min-width: 600px) {
  #header {
    width: 600px;
    margin: 0 auto;
    height: 190px;
  }
  #header .background-image {
    background-attachment: initial;   /* new */
  }
}
<section id="header">
  <div class="background-image">
    hello
  </div>
</section>

Обратите внимание, что я немного изменил размеры, чтобы позволить мне тестировать;Теперь точка останова составляет 600 пикселей, а не 2600 пикселей, поскольку у меня нет такого широкого монитора.Так что вам не нужно копировать весь код, достаточно новой строки с фоновым вложением.

0 голосов
/ 31 января 2019

Я бы использовал: 

.background-image {
    width: 2600px;
    background-size: initial;  /* to use the file sizes default height/width */
    background-position: center;  /* then optionally center the image */
}

Поскольку .background-image имеет ту же ширину, что и #header, вашим следующим препятствием будет высота изображения, следовательно, возможная необходимость центрирования.

...