Как правильно задавать минимальную высоту?

Question

[Treniki]

Доброго времени суток. Столкнулся с такой проблемой, что макет имеет ширину 1440px, соответственно, после экспорта background-изображения, оно - такой же ширины. У меня монитор имеет разрешение 1920x1080, в связи с чем, в моем браузере background-изображение с шириной 1440px выглядит хуже, чем на меньшем разрешении и пропорционируется совсем по-другому (растягиваясь на весь container-fluid, оно увеличивается в ширине и высоте, но, т.к. задана фиксированная минимальная высота, не видно картинки целиком при большом разрешении экрана). Минимальную высоту задал исходя из оригинального размера изображения - 740px. В связи с чем возникает ряд вопросов:
1) Как вы "выбираете" минимальную высоту блоков для ПК - Laptop пользователей, имеющих разные разрешения экрана?
2) Если ширина макета меньше FullHD, то как вы "улучшаете" изображения?
3) Использовать @media-запросы для каждого разрешения?

UPD: попробую показать в картинках, что я имею в виду
Оригинал:


Уже в браузере с правилами CSS:

Answer 1

[cssfish]

1) Когда получаешь такой макет, спрашиваешь дизайнера:
как ведет себя картинка на разрешениях бОльших 1440?
-Обрезается по краям?
-Обрезается по краям, при этом плавно градиентом уходит к фоновому цвету?
-Растягивается на всю ширину с сохранением высоты? (cover)
-Растягивается на всю ширину с сохранением пропорций картинки?
2) Верстаешь на основании ответов
3) Если ответов нет, или диз в шоке, и прочее, сделайте-как-нибудь, то делаешь так, как считаешь нужным. Т.е. сам принимаешь решение. Сам :)

Answer 2

[Ankhena]

Либо макет не был "резиновым" и растяжение на всю ширину любого монитора не подразумевалось.
Либо это задача дизайнера предоставить изображения нужного размера и соответствующего качества.
И не забывайте про ретину.

Comments

[Treniki]

Как выглядит резиновый макет? Какую ширину он имеет? Макет - это, по сути, то, как должен выглядеть сайт. Например, если макет имеет ширину 1440px и шапка занимает определенную высоту в нем (740px), то как я должен представить, какую высоту шапка будет заниматься у пользователя с шириной 1920px и менее? Как мыслить о пропорциях? Видел кучу макетов в разрешении не FullHD, однако, верстальщики спокойно верстали и для FullHD, и для меньших разрешений. Я это к тому, что в макете зачастую показывается версия сайта для 1 разрешения, но верстальщики как-то додумываются и делают его под все разрешения ПК - Laptrop юзеров. Так вот как они пропорционируют макет, его блоки, изображения, элементы для других разрешений? Ведь если для ширины 1440px высота шапки будет 740px, то для 1920px - уже другая. Как они узнают это высоту?

[zoozag]

Treniki:

• Если у тебя контейнер во всю ширину экрана, можешь задавать его высоту в vw.
  
• Другой вариант использовать внутри шапки блок или псевдоэлемент с padding-top в %. Он считается относительно ширины родителя. А остальные элементы внутри шапки позиционировать абсолютно.
  
• Третий вариант - не сохранять пропорции. В таком случае высота шапки будет зависеть только от ее содержимого, а картинка cover-ом сама подстроится под нужные пропорции. Нужно только правильно задать background-position исходя из содержимого фоновой картинки, center в этом случае подойдет не всегда.
  

Если говорить в целом, а не только о шапке. Верстальщик должен по макету понять какие элементы масштабируются при изменении разрешения, а какие остаются фиксированных размеров. Если по каким то моментам возникают вопросы, уточнить у дизайнера/заказчика.

[Ankhena]

Treniki:
1. Пропорции: например, так https://jsfiddle.net/Ankhena/cLhxv7eq/ если речь о фоновом изображении.
height: auto если речь о img
2.

1440px и шапка занимает определенную высоту в нем (740px),

Нужно понимать, кто такие 740 по задумке дизайнера. Они получились из-за размера самого изображения или изображение должно занимать 3/4 экрана.
Должны ли сохраняться пропорции или высота должна оставаться фиксированной и на1920 тоже быть 740 точек.
3.

Видел кучу макетов в разрешении не FullHD, однако, верстальщики спокойно верстали и для FullHD, и для меньших разрешений.

Хотелось бы знать, что именно вы видели.
Если на картинке небо с облачками - то его можно растянуть в 2 раза без затей - никто и не заметит. С текстом на картинке так не получится.
4.

Ведь если для ширины 1440px высота шапки будет 740px, то для 1920px - уже другая. Как они узнают это высоту?

Не понимаешь сам - спроси дизайнера.
Нет никакого общего решения, всегда смотрят по макету. Также обращают внимание на текст в шапке, сколько его, как он будет размещаться на fullHD, как на смартфонах и т.д.

[Treniki]

Ankhena W: вот! То, что нужно! Я и не могу понять, должна ли шапка ВСЕГДА занимать 740px, при любой ширине, или же 3/4 экрана - это - то меня и мучает

[zoozag]

Treniki:
У тебя только два варианта:
1. Спросить у дизайнера/заказчика/руководителя проекта
2. Самому принять решение

Answer 3

[Евгений]

со стороны дизайнера - просто предоставить картинку в макс разрешении... остальным верстальщик занимается - как он это дело оформит