Перемещение изображения в браузере, как в баннере Facebook, но теперь изображение - PullRequest
Новая
       37

Перемещение изображения в браузере, как в баннере Facebook, но теперь изображение

0 голосов
/ 04 февраля 2011

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

Ответы [ 2 ]

2 голосов
/ 04 февраля 2011

У вас есть два варианта:

  1. Используйте повторяющийся узор, который заполняет всю ширину: вы можете сделать это, используя

    width: 100%; background: url(your-image-file) repeat-x

  2. Используйте фиксированное основное изображение и фоновое изображение, заполняющее оставшуюся область: фон будет использовать тот же код, что и выше, а основное изображение может быть img в контейнере фона.

0 голосов
/ 30 июля 2012

Ну, для начала, давайте очистим ваши поля с помощью этого кода. 

* {            
    margin: 0;
    padding: 0;
}

Используя это в вашей таблице стилей или разделе, вы сможете растягивать эти изображения полностью без пробелов,

Далее вам нужно создать изображение, которое не выглядит перекошенным.Для этого вам нужно будет создать его в достаточно широком формате для начала.Если вы хотите заполнить весь фон, я бы предложил 1028X768 px в качестве хорошего размера.

Наконец, пришло время разместить последний бит кода и заставить его работать. 

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;
}

Это будет работать с dang рядом со всеми текущими браузерами (кроме IE8 и ниже).

Чтобы разместить изображение нечетного размера, которое вы хотите охватить, но не полностью покрыть, я бы предложил использовать <div> создать место для изображения и добавить стиль к <div> с надписью width: 100%;.

Это можно сделать и с высотой.

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

...