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

Есть учебный макет. Выглядит он следующим образом:
5dc5a0ac5ce52422647794.jpeg
Все, что желтый фон - это header. Верстаю, используя Bootstrap 4, но суть не в этом. Если верстать, как и показано в макете (используя такие же отступы и поля), то на некоторых разрешениях экрана изображение iPad'a отображается, как мне кажется, не очень подходящим образом:
5dc5a19a4962d446828363.jpeg
Разрешение экрана на изображении сверху равно 1366x768. Таким образом даже нижний padding у header не виден, так как скрыт за нижней границей viewport'а:
5dc5a1f728fb3625769823.jpeg
Конечно, на разрешении экрана, например, FullHD header сайта отобразится во всей своей красе и ничего не будет обрезано:
5dc5a28ba026a046270865.jpeg
Вы бы оставили эту проблему так, как оно есть или все же что-нибудь сделали с этим изображением?
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
cesnokov
@cesnokov
<head>&nbsp;</head>
Все мои заказчики без исключения нервничают, когда дизайнеры/верстальщики им рассказывают, что на "нормальном" экране выглядет нормально. Но давайте полагаться на демократические ценности: у 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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы