[РЕШЕНО] Резиновая картинка между хеадером и меню- как?
epson950
Есть фиксированный по ширине (1200) шаблон, вверху хеадер с логотипом, ниже меню и далее содержимое.
Задача- между хеадером и меню разместить картинку (изначально 1920х400) так что бы она не изменяя своих пропорций и не круша шаблон, была на всю ширину экрана. Т.е. на широком экране она была как есть 1920х400, а при изменении разрешения сжималась бы до этого разрешения, например до 1200х250. Ну и соответственно растояние между хеадером и меню тоже бы менялось на высоту картинки.
Помогите решить эту задачку.
Степаныч
epson950, покапайтесь в блогах, про резиновое видео, возможно из этого можно что то сделать
epson950:
Т.е. на широком экране она была как есть 1920х400, а при изменении разрешения сжималась бы до этого разрешения, например до 1200х250.
Нужно смотреть в сторону % ширины.
artnikov
epson950:
не круша шаблон, была на всю ширину экрана.
1.Вариант: Надо будет прописать div с параметрами width:100%;max-width:1920px;height:auto; и так далее... и картинка должна быть размером 1920px.
2. Вариант: просто прописать новый div, а в css к нему прописать background-image:ваша картинка;background-size:cover;background-position:center center; - Изображение будет менять размер в зависимости от того, какая ширина задана в sheet. Более подробно могу пояснить в конкретном коде... scratch
Редактировалось: 1 раз (Последний: 24 января 2014 в 13:59)
epson950
Спасибо, помогло!
Перейти на форум: