Фоновое изображение полной страницы, обрезанное сверху и снизу - PullRequest
Новая
       17

Фоновое изображение полной страницы, обрезанное сверху и снизу

0 голосов
/ 01 мая 2019

Я создаю веб-сайт, на котором мне нужно полноразмерное фоновое изображение для отображения на всех устройствах. Я создал это изображение в Photoshop, и оно составляет 2560 x 1440 (16: 9).

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

По какой-то причине при использовании приведенного ниже кода верхняя и нижняя часть изображения (белые границы) обрезаются.

Эта проблема исчезает, когда я использую контрольный элемент и устанавливаю в окне просмотра значение 1920 x 1080 и т. Д ...

Мой монитор настроен на разрешение 1920 x 1080, и я использую браузер Opera, также протестированный в IE.

Вот изображение того, что происходит - https://gyazo.com/fb5d44dfd5332e42f1406e1f427dbd4a

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

Любая помощь приветствуется. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="css/styles.css">
    <title>Hello, world!</title>
  </head>
  <body>
  </body>
</html>

html { 
background: url(../media/placeholder.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

1 Ответ

1 голос
/ 01 мая 2019

Это потому, что вы используете background-size: cover, он делает именно то, что должен. Он будет на 100% «покрывать» элемент, не оставляя «пустого» пространства вокруг него, независимо от того, как он будет изменен, и это может привести к обрезанию.

Попробуйте вместо этого использовать background-size: contain, это может быть больше, чем вы ищете. 100% изображения всегда будет видно, но вокруг него могут остаться пустые места.

Вот хорошая демонстрация каждой опции background-size и как она выглядит https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

К вашему сведению, вам не нужно включать префиксы разных поставщиков (-o-*, -moz-* и -webkit-*) для этой функции, она довольно хорошо поддерживается (если, конечно, вам не нужно поддержка IE8, Firefox 3 и т. д.)

...