Фон CSS с использованием "background-size: cover" не соответствует полной высоте

Я делаю страницу, на которой будет отображаться SVG-образ, и вот требования:

  • вектор должен занимать все окно
  • вектор должен поддерживать соотношение сторон (определенное в самом файле SVG)
  • вектор должен обрезать/обрезать, чтобы предотвратить перекос

CSS...

body {
  background: url(/path/to/image.svg);
  background-size: cover;
}

... работает почти отлично, за исключением того, что, когда окно браузера становится слишком узким, оно не использует обрезку/обрезку.

Вот несколько снимков экрана (пожалуйста, игнорируйте артефакты, оставленные dabblet): window close to aspect ratio

Здесь окно близко к соотношению сторон исходного изображения window "shorter" than aspect ratio

Здесь окно "короче", чем соотношение сторон, и изображение обрезается (по желанию). enter image description here

Здесь окно "уже", чем соотношение сторон, но вместо обрезки изображение черепично (нежелательно).

Вот некоторые мысли, которые у меня были...

  • Можно ли каким-либо образом изменить изображение SVG, чтобы это не произошло?
  • Могу ли я разметку/стиль страницы для достижения желаемых результатов?
  • Я бы предпочел сохранить в области HTML/CSS, но если нужен Javascript, то так-бы-он.

Здесь dabblet, с которым я работал... http://dabblet.com/gist/6033198

Ответы

Ответ 1

После некоторых проб и ошибок, это то, что я нашел.

Добавление (в исходный CSS):

html {
  height: 100%
}

доставлено именно то, что я искал в оригинальной спецификации.

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

html { 
  background: url(path/to/image.jpg) no-repeat center center fixed; 
  background-size: cover;
}

Наконец, если бы я хотел, чтобы он был центрирован, всегда поддерживайте соотношение сторон, но НЕ обрезано (то есть, некоторые пробелы в порядке), тогда я мог бы сделать:

body {
  background: url(/path/to/image.svg) no-repeat center center fixed;
  background-size: contain;
}

Ответ 2

Этот css работает. Спасибо

"background-size: contain;"

.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;}

<div class="cover">&nbsp;</div>