Как GE удалось исправить и масштабировать этот фон?

Question

Я пытаюсь заставить фоновое изображение вести себя как фон GE на их сайте: http://www.ge.com/stories/powering-gas-engines.html

Мне было интересно, какие методы CSS или javascript они использовали для получения такого эффекта.

Answer 1

Существует плагин jQuery, который может помочь вам в этом, и он выложил код в своем описании, чтобы дать хорошее представление о том, как все это работает.Что мне нравится в этом, так это то, что он также поддерживает соотношение сторон.

http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

Answer 2

это изображение, а не фоновое изображение, и они используют функцию javascript, вызываемую из события onresize, чтобы установить ширину и / или высоту его на полную ширину содержащего его div.

Подобный эффект можно создать с помощью свойства background-size css3, но это поддерживается только в браузерах, совместимых с css3.

Answer 3

css width: 100% для контейнера и фонового изображения и использование медиазапросов для контроля минимального размера окна для использования эластичной ширины или фиксированной ширины