Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Как выставить картинку фоном + по размерам?

Alex Гуру (3839), на голосовании 3 года назад
Учусь верстке.
У меня моник разрешением 1366х768, скачал шаблон для практики и там картинка в heder шириной 1800рх. Худо бедно я ее подогнал под свой моник, а как я могу знать точно, что она на широких экранах будет показана на всю ширину?
Я задаю основному контейнеру ширину этой картинки, правильно 1800рх ?
Как сделать чтоб без медиа-запросов она сужалась пропорционально?
И вобще не понятно по макету это должно быть фоновым изображением или через img src его ставить?
По макету вроде это должно быть видео на первый блок, не?
Макет прикрепил
Голосование за лучший ответ
Ярослав Искусственный Интеллект (107821) 3 года назад
Достаточно сверстать хедер (вообще это hero, но пусть будет хедер) респонсивно. То есть, медиа-запросы в данном случае не нужны, лишь бы блок тянулся - и само изображение допускает кадрирование без потери смысла, поэтому я бы просто использовал background-size:cover.

Найти вводную инфу по отзывчивой верстке легко - по запросу 'отзывчивая|резиновая верстка'. Эта инфа будет включать также и разные способы указания размеров фоновых изображений (%, cover, contain, всяфигня).
А пропорции сохраняются по-умолчанию... и в случае фона, и в случае img - если верстальщик сам не сломает это дефолтное поведение.
AlexГуру (3839) 3 года назад
Респонсив не получается, можно подробнее какие свойства указывать..
И как знать что на больших экранах картинка увеличится?
А эта картинка просто как фон, или слайдер или видео?
Ярослав Искусственный Интеллект (107821) Alex, чтобы проверить как "на больших экранах увеличится" - используй эмуляцию в devtools браузера: там есть и возможность указания размера вьюпорта, и масштабирование. Какая еще "эта картинка"?
Анти Советчик Искусственный Интеллект (125441) 3 года назад
"... а как я могу знать точно, что она на широких экранах будет показана на всю ширину?"
Колесико мыши с зажатой клавишей [Ctrl].
VortexWeb.net Мыслитель (6149) 3 года назад
-webkit-background-size: 100% auto;
background-size: 100% auto;

или

-webkit-background-size: cover;
background-size: cover;
AlexГуру (3839) 3 года назад
ставил cover картинка вобще не отображается
Иван Смагин Знаток (339) 3 года назад
Вроде надо выставить в css:
width: ; heigth: ;
Дальше можешь перемещать картинку куда хочешь, с помощью margin-left/top/right/bottom
Похожие вопросы