Как сделать масштабирование верстки при заполнении всей ширины экрана?

Question

[ymfront]

Есть страница, которая занимает все свободное пространство и масштабируется по высоте. Но если страница не помещается по ширине, то появляется горизонтальная полоса прокрутки.



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

Для тега html указан размер шрифта font-size: 1vmin. И все остальные расчеты размеров идут относительно него.

HTML-код страницы:

<div class="main">

    <img class="logo" src="./img/logo.png" alt="logo">
    <img class="header" src="./img/header.png" alt="header">
    <img class="text" src="./img/text.png" alt="text">

    <div class="wheel_wrapper">
        <img class="wheel" src="./img/wheel.png" alt="wheel">
        <img class="marker" src="./img/marker.png" alt="marker">
        <img class="spin_button" src="./img/spin_button.png" alt="spin button">
    </div>

</div>

CSS-код страницы:

html {
    height: 100%;
    font-size: 1vmin;
}

body {
    height: 100%;
    background: #141414 url("../img/bg_desktop.jpg") center top no-repeat;
    background-size: cover;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    cursor: default;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 0 0;
    min-height: 100%;
    position: relative;
}

.logo {
    display: block;
    margin: 0 0 5rem;
    width: auto;
    height: 7.8rem;
}

.header {
    display: block;
    margin: 0 0 6rem;
    width: auto;
    height: 11rem;
}

.text {
    display: block;
    width: auto;
    height: 14.2rem;
    position: absolute;
    top: 57rem;
    left: 50%;
    transform: translateX(-49.7%);
}

.wheel_wrapper {
    width: 62rem;
    height: 62rem;
    position: relative;
}

.wheel_wrapper .wheel {
    display: block;
    width: 100%;
    height: auto;
}

.wheel_wrapper .marker {
    display: block;
    width: 5.8rem;
    height: auto;
    position: absolute;
    top: -0.4rem;
    left: 50%;
    transform: translateX(-47%);
}

.wheel_wrapper .spin_button {
    display: block;
    width: 29rem;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-47%, -50%);
}

Comments

[Ankhena]

Этот вопрос может быть сложным только при проблемах с геометрией.
С точки зрения верстки проблем нет.

Т.е. сначала определяетесь как это должно выглядеть, потом пишете стили.

Какие свойства помогут:
- object-fit
- background-size
- aspect-ratio (или хак с паддингами, если недостаточно поддержки)

И дальше сопутствующие для расположения bg position, object-position, флексы, гриды

[ymfront]

Ankhena, вы написали свойства object-fit и background-size, которые относятся только к фонам и картинкам. Но это к данной странице не имеет никакого отношения. Заголовки и тексты могут быть сверстаны не картинками, а текстами.

[Ankhena]

ymfront, у вас там ни одной картинки и фона нет?

Разумеется, что тексты вы будут верстать текстом. В vw или как у вас и написано в vmin.

Могу дописать еще @media. Может наведет на правильные мысли.
Если не наведет, то допишу ещё JS.

[ymfront]

Ankhena, возможно вы неправильно поняли мой вопрос. Использовать медиазапрос я не могу, потому что заранее ширина блока .main неизвестна, т.к. при разной высоте экрана ширина будет разная. И JS тоже не подходит. Чтобы было понятней, нужен эффект, который дает свойство background-size: contain, если бы весь контент в блоке .main был фоновой картинкой.

[Ankhena]

ymfront,

И JS тоже не подходит.

Этот-то как раз подходит в любом случае. (Тут скорее вопрос, можно ли решить без него. )
Например, плагины типа fittext.
Но, скорее всего придется допиливать для работы не только с шириной, но и с высотой.

Ещё вариант работающий всегда: это запихать всё в svg, задать contain, а текст доступно скрыть.

[ymfront]

Ankhena, в моем случае ничего в svg запихать нельзя, тут интерактивное колесо, которое при нажатии кнопки крутится. И почитал про aspect-ratio, не могу понять, как оно мне поможет, да не очень хорошо поддерживается браузерами.

[Ankhena]

ymfront, кто мешает крутить svg? Кто мешает ему быть интерактивным?
Что делать, если мало поддержки aspect-ratio я вроде написала выше.

[Ankhena]

ymfront, но раз всё так, то остается только фриланс.

[ymfront]

Ankhena, да я бы и рад, но и на фрилансе не знают, как сделать эту задачу :-(

[Ankhena]

ymfront, ок, давайте последний намек.

Возьмем горизонтальный вьюпорт. Т.е. минимальный размер это высота. 1rem = 1vmin = 1vh.

Считаем (для простоты даже забьем на min-height 100%):
wrapper
- padding - 4rem
лого
- высота 7.8
- margin 5
title
- 5строк по 10 = 50
колесо
- высота 62

Складываем и получаем 128.8vh

Каким образом, по вашей логике, это должно было поместиться в 100?

После раздумий можно вернуться к моим первым комментариям с инструментами, которые могут помочь.
Гриды, кстати, ещё с их min-content или minmax.

[ymfront]

До вашего сообщения нашел свое решение.
Для тега html шрифт указываю не в vmin, а в vh.
Написал медиазапрос max-width: calc(100vh * 1.1). И при удовлетворении этого медиазапроса указываю размер шрифта уже в vw (font-size: 1vw), и в медиазапросе переписываю размеры в соответствии с шириной экрана.

[Ankhena]

ymfront,

max-width: calc(100vh * 1.1)

Если самостоятельно 100 не умножить на 1.1, то ок.
И если не подходят @media по aspect-ratio, min-aspect-ratio, max-aspect-ratio и orientation, то тоже ок.

Но успех в том, что теперь @media вам уже подходят. Это хорошо.

[ymfront]

Ankhena, вы правы, что-то я не подумал умножить сам :-)

Answer 1

[ymfront]

Пришел к следующему решению:

1. Для тега HTML указываем размер не в vmin, а в vh.

html {
    font-size: 1vh;
}

2. Определяем пропорции ширины контентной части к высоте, и делаем медиазапрос, в котором меняем единицу измерения с vh на vw:

@media screen and (max-width: 113vh ) {
    html {
        font-size: 1vw;
    }
    /* для всех элементов указываем новые размеры относительно ширины экрана, а не высоты */
}