полноэкранное фоновое изображение (вроде) - без кадрирования?

Question

Мой клиент хочет то, что на самом деле может быть невозможным - ему нужно полноэкранное фоновое изображение, которое не обрезается и сохраняет свои размеры.Они готовы принять пустое пространство, но хотят, чтобы изображение заполняло экран как можно лучше, не обрезаясь по какой-либо оси.Мне удалось найти хорошие сценарии, которые позволяют создавать настоящие полностраничные фоны, но они не принимают обрезку изображения.Есть идеи?

Answer 1

HTML:

<img id="bg" src="whateves.jpg"/>

Вы можете центрировать изображение в css

#bg { display:block; margin:auto; }

с использованием jquery:

$(window).load(function(){
      var windowRezize = function() {
          var windowHeight = $(window).height(),
              bg = $('#bg'),
              bgHeight = bg.height();

            console.log(windowHeight);
            console.log (bgHeight);
          bg.height($(window).height());
          bg.css('opacity', '1');
      };
      windowRezize();
      $(window).resize(function(){
          console.log('resized');
          windowRezize();
      })

  });

Answer 2

Это не невозможно! Вы можете полностью сделать это. Используйте JQuery, чтобы найти высоту и ширину окна просмотра браузера и вуаля! Установите фоновое изображение для этого размера. Если вам нужно сохранить аспект, используйте алгоритм JQuery для ширины / высоты, используйте это соотношение для сравнения с соотношением фактических размеров, а если оно выше / ниже, задайте для высоты / ширины фонового изображения значение 100% и другое измерение. к какому-либо фактическому соотношению, которое будет рассчитано.

Если ваш клиент не заботится о полосах прокрутки, вы можете следовать этому руководству при третьей попытке: http://css -tricks.com / 766-how-to-resizeable-background-image / И задайте минимальную высоту элемента html / body в соответствии с шириной фона. образ. Я надеюсь, что все это поможет вам получить идеи о том, что делать.