Как бы вы решили проблему с изображением, которое неудачно расположилось при верстке макета?

Question

[Александр]

Есть учебный макет. Выглядит он следующим образом:

Все, что желтый фон - это header. Верстаю, используя Bootstrap 4, но суть не в этом. Если верстать, как и показано в макете (используя такие же отступы и поля), то на некоторых разрешениях экрана изображение iPad'a отображается, как мне кажется, не очень подходящим образом:

Разрешение экрана на изображении сверху равно 1366x768. Таким образом даже нижний padding у header не виден, так как скрыт за нижней границей viewport'а:

Конечно, на разрешении экрана, например, FullHD header сайта отобразится во всей своей красе и ничего не будет обрезано:

Вы бы оставили эту проблему так, как оно есть или все же что-нибудь сделали с этим изображением?

Comments

[WapSter]

Это не от верстальщика зависит, а от заказчика. А так это делается при помощи heading 100vh

[Maxim Kirshin]

Может с помощью calc() ?

[Александр]

WapSter, да, 100vh не даст обрезать header, но в данном случае, наверное, такое решение применимо для экранов с не очень большой высотой, иначе внизу останется много пустого пространства. Я сейчас думал над одним решением данной проблемы, но не знаю насколько это приемлемо.

Высота header'а на макете составляет 741px, что явно больше высоты моего viewport'а (635px), из-за чего header обрезается. Значит, можно использовать JavaScript для того, чтобы определить высоту viewport'а, и, если она меньше 741px, выставить header'у высоту в 100vh, а изображение iPad'а уменьшить. Если высота viewport'а равно или более 741px - отобразить header в том масштабе, в каком он изображен в макете.

Как вы думаете, это удачное решение? Чтобы и те и другие пользователи остались довольны?

[WapSter]

Александр, ужас какой где вас всех учат верстать max-height 741px height 100vh

Answer 1

[Павел Чесноков]

Все мои заказчики без исключения нервничают, когда дизайнеры/верстальщики им рассказывают, что на "нормальном" экране выглядет нормально. Но давайте полагаться на демократические ценности: у 80% населения интернета вертикальное разрешение экрана 900 и меньше. А абсолютное большинство сидят на резолюции 1366x768, чуть ли не 30% от всех пользователей. Так, что вот вам и ответ: с картинкой планшета надо что-то делать.

#2
Если вы изучаете вёрстку на примере Tinyone то вам необходимо подправить файл main.css изменив стиль объекта с классом ".ipad" в строке 81, с этого:

.ipad {
    display: block;
    margin: 60px auto 0;
}

на что-то такое:

.ipad {
    display: block;
    margin: 60px auto 0;
    max-height: 320px;
    width: auto !important;
}

Comments

[Александр]

С ним можно сделать только одно - уменьшить, только не знаю как это можно было бы сделать.