Экран приветствия должен учитывать все популярные устройства. 900px по высоте не будут влезать на стандартный ноутбук или недорогой офисный монитор с их ~ 650px по высоте. Проще задавать ему высоту в 100vh + ограничение по высоте в px, если дело касается десктопов.
Но это так, отступление.
Всё от дизайна зависит. Какой-то экран приветствия прямо отлично выглядит и при 400px высоты. А какой-то выглядит так себе и в модных 100vh. Вот вы делаете экрана приветствия и понимаете, что он выглядит плохо и пусто при 100vh — почему бы его не сжать по высоте? Мы сконцентрируем нужную информацию, тем самым не будем заставлять человека бродить взглядом.
Рецепта нет, всё зависит от дизайна. Да, 100vh при грамотном дизайне выглядят хорошо. Но так же хорошо могут выглядеть и относительно небольшой блок.
Такое CSS-решение не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):
Одиночка Айс, ну, в данном случае никаких магических чисел нет. К ширине в 100% прибавляем px с шагом в 25px. От них можно избавиться, если будете вкладывать одинаковые блоки друг в друга, тогда можно на padding это сделать.
Пользуйтесь валидатором, там всё сказано же: Это не мелочь, вы сверстали коряво. Какие-то браузеры умеют такие ошибки на лету исправлять, а какие-то — нет, поэтому структурных ошибок быть не должно никогда.
Александр Логинов-Солоницын, просто есть стандарт, а есть предпочтения. Особенно когда работаете в команде. Тут уже не до личных предпочтений, когда дело касается таких вещей.
Мы так однажды несколько часов отлавливали подобное «предпочтение» другого разработчика, из-за которого ломалось всё.
Ну, собственно, делайте как хотите, конечно, если позволяет ситуация. Просто я бы не учил людей такому.
Александр Логинов-Солоницын, Bootstrap сделан достаточно хорошо с точки зрения технологии. Другое дело, что его надо и не надо используют все и вся. Я тоже вообще его не использую, но сути это не меняет.
Это просто пример, где был ваш подход использован раньше. Посмотрите любой другой крупный хороший сайт — вы не увидите ваш код данного сброса. По весьма очевидным причинам.
Александр Логинов-Солоницын, эм… тогда скажите, пожалуйста, почему этой фичей не пользуются ни на одном большом сайте, а пользуются тем кодом, что прислал я?
Зачем создавать узкие места? Если надо сделать наследование, то родителю меняйте border-box и через .parent * { border-box: inherit; } делаете ваше наследование для вложенных элементов, как все обычные люди.
Я помню, сколько проблем было, когда в Bootstrap это сделали таким макаром. Потом забывали, что там везде наследование стоит.
