Хедер - изображение на весь экран. Как реализовать в макете?
Пример:
http://www.colemansmith.ca/
https://www.anchour.com/
Сколько пикселей выделять в хедере при рисовании макета, что бы при верстке качественно выглядело на разных разрешениях экрана? Если по ширине 1080, то какая должна быть высота?
Комментарии пользователей
рисуешь самое больше разрешение экрана, сейчас это 30" монитор на остальных разрешениях просто уменьшаешь большое изображение
А конкретней в размерах?
https://www.google.com.ua/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=%D1%80%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%BE%D0%B2
1. Вы можете открыть примеры и посмотреть как реализовано у них ;) Например, у anchour.com стоит пикча 2300х1516 с выравниванием по центру и background-size: cover. Таким образом в узком экране (на мобиле) пикча будет помещаться во весь экран, обрезая края. А на моем сверх-широком монике (2556х1080) будет обрезаться снизу мужик и сверху часть градиента. 2. Рисовать самое большое и ресайзить — ок, но не ок в плане оптимизации. Так, например, гугл спид инсайт и мобилки могут офигеть. И не только из-за загрузки большой картинки, но еще и из-за того что ресайз изображения в браузере это всегда дополнительная нагрузка на ЦП и время отрисовки страницы. Лучше рисовать что-то среднее/мелкое, а дальше определять нужный размер и заменять джской. Ну это если хочется чтобы все четко было. Ну и, конечно же, зависит от задач. Если делаете промо-сайт исключительно для десктоп-устройств, то можно забить на это. А медленную загрузку компенсировать красивым прелоадером +)
brusher, есть же @media
Люди,которые сидят на мониторах с расширением больше чем full hd 1920х1080 еденицы. И подстраиваясь под эти еденицы очень глупо. Загрузишь километровую картинку, которая будет весит стопицот кило и грузиться 300 лет и к тебе на сайт никто не прийдет. Делай под full hd и будет тебе счастье.