Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Резиновая картинка между хеадером и меню- как?

Посетитель
epson950
Сообщений: 12
216 дней назад
Есть фиксированный по ширине (1200) шаблон, вверху хеадер с логотипом, ниже меню и далее содержимое.
Задача- между хеадером и меню разместить картинку (изначально 1920х400) так что бы она не изменяя своих пропорций и не круша шаблон, была на всю ширину экрана. Т.е. на широком экране она была как есть 1920х400, а при изменении разрешения сжималась бы до этого разрешения, например до 1200х250. Ну и соответственно растояние между хеадером и меню тоже бы менялось на высоту картинки.
Помогите решить эту задачку.
Постоянный участник
Степаныч
Медаль
Сообщений: 636
3 дня назад
epson950, покапайтесь в блогах, про резиновое видео, возможно из этого можно что то сделать
epson950:
Т.е. на широком экране она была как есть 1920х400, а при изменении разрешения сжималась бы до этого разрешения, например до 1200х250.
Нужно смотреть в сторону % ширины.
Постоянный участник
artnikov
Медаль За активное участие в жизни сайта.
Сообщений: 478
526 дней назад
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
Сообщений: 12
216 дней назад
Спасибо, помогло!
|
Перейти на форум: