Если самостоятельно 100 не умножить на 1.1, то ок.
И если не подходят @media по aspect-ratio, min-aspect-ratio, max-aspect-ratio и orientation, то тоже ок.
Но успех в том, что теперь @media вам уже подходят. Это хорошо.
Возьмем горизонтальный вьюпорт. Т.е. минимальный размер это высота. 1rem = 1vmin = 1vh.
Считаем (для простоты даже забьем на min-height 100%):
wrapper
- padding - 4rem
лого
- высота 7.8
- margin 5
title
- 5строк по 10 = 50
колесо
- высота 62
Складываем и получаем 128.8vh
Каким образом, по вашей логике, это должно было поместиться в 100?
После раздумий можно вернуться к моим первым комментариям с инструментами, которые могут помочь.
Гриды, кстати, ещё с их min-content или minmax.
Павел Орловский, для начала прислушаться к просьбе из комментария: сделать песочницу с видимой проблемой на codepen.io
Добавить её в вопрос и потом позвать.
Этот-то как раз подходит в любом случае. (Тут скорее вопрос, можно ли решить без него. )
Например, плагины типа fittext.
Но, скорее всего придется допиливать для работы не только с шириной, но и с высотой.
Ещё вариант работающий всегда: это запихать всё в svg, задать contain, а текст доступно скрыть.
Поддерживаю всё, что сказал Сергей в ответе.
И плюс дополнительный вопрос: зачем вам нужно указывать ширину body. Если с ней ничего не делать, то и так всё будет хорошо. Нужно только обнулить margin у body
Оно вообще не должно обрезаться. Замените на contain.
Но если прямо по сути вопроса, то хорошо бы изучить простейшее свойство background. Вообще в любом справочнике и посмотреть из каких частей оно состоит.
В данном случае нужно background-position
Владимир Коротенко, дело в том, что мои аргументы основаны на спеке. А ваши ни на чем. Более того, вы путаете теги и атрибуты.
Поэтому, мы не будем продолжать дискуссию. Тем более, что, вероятнее всего, вы продолжите делать формы дивами и мы тут со своей спекой ничего не изменим.
Но автор вопроса поддержку получил и этого достаточно.
Если самостоятельно 100 не умножить на 1.1, то ок.
И если не подходят
@mediaпоaspect-ratio,min-aspect-ratio,max-aspect-ratioиorientation, то тоже ок.Но успех в том, что теперь
@mediaвам уже подходят. Это хорошо.