Расширение фона при сохранении исходного соотношения сторон

Question

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

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

http://www.pixelcrayons.com/

Answer 1

Доступен действительно отличный плагин jQuery: SuperSized

Он не только изменяет размер фона, но и имеет множество других опций.Надеюсь, это поможет!

Answer 2

Сначала плохие новости: CSS (в настоящее время) не позволяет растягивать или масштабировать фоновое изображение, поэтому это не так просто, как должно быть.

Однако есть несколько способов обойти это. Лучшее решение (IMHO) - иметь обычный <img> тег размером до 100%, позиционировать absolute (или даже static в зависимости от желаемого эффекта) и располагать позади всего остального, используя z-index.

Самое лучшее в этой опции - это отсутствие Javascript.

Но если вы хотите узнать о других решениях (в которых используется Javascript), попробуйте следующую ссылку: http://css -tricks.com / how-to-resizeable-background-image / (но учтите, что его предпочтительное решение в конце концов такое же, как и у меня)

Надеюсь, это поможет.