Сохраняйте фоновое изображение на полную высоту, обрезая только стороны, чтобы сохранить пропорции

У меня есть мобильная страница с полноэкранным фоновым изображением.

У меня есть одно изображение для портрета и одно для пейзажа. Моя миссия состоит в том, чтобы сохранить высоту изображения на весь экран, обрезав стороны по размеру экрана и сохранив соотношение сторон.

Я попробовал эти CSS-трюки post:

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

Несмотря на то, что он отлично работает (как мне и нужно) в портретной ориентации, он не соответствует моим потребностям в ландшафтной: он сохраняет изображение на всю ширину экрана и обрезает его сверху и снизу (мое требование от дизайнеров - сохранить полную высоту экрана и обрезать стороны). В Интернете есть много примеров сохранения пропорций изображения и т. д. (для example ), но я смог найти решение для своей ситуации...

Спасибо! Янив


mobile html css responsive-design
person Yaniv Efraim    schedule 06.11.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Это сработало для меня, это основано на том, что изображение имеет достаточно большой размер, чтобы покрывать большие размеры экрана...

 html { 
  background: url(http://lolcat.com/images/lolcats/1338.jpg) no-repeat center center fixed; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  }

Jsfiddle здесь

person Matt Maclennan    schedule 06.11.2013
comment
Это работает, tnx! Единственное, чего не хватает, это: background-size: cover; чтобы заставить его работать. - person Yaniv Efraim; 06.11.2013