Проблемы с height 100% и вертикальным центрированием и последующим отображением на мобилках с мелкой высотой экрана

Question

Есть два div'a и оболочка .outer, которая флексит и выравнивает по вертикали своё содержимое .inner относительно веб страницы. Предлагаю рассмотреть код, очень простой

html, body{
    height: 100%;
    width: 100%;
    background-color: rgb(54, 54, 54);
    margin: 0;
    padding: 0;
}

*{
    box-sizing: border-box;
}

.outer{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner{
    background-image: url(https://i.ibb.co/Mfws8xG/b76f1d3521154c1e9b4da31ca19b17ad.png);
    background-size: 100% 100%;
    height: 708px;
    width: 500px;
}

    <div class="outer">
        <div class="inner"></div>
    </div>

Проблема в том что при норм высоте окно просмотра, все по центру и шрек есть. А при маленькой высоте просмотра пол головы шрека нет, а скролбар не помогает. Как решить это? На див натянул Шрека что бы было видно что див пропадает

Answer 1

Шрек персонаж уважаемый, не надо его натягивать. Уберите у класса outer align-items: center и Шрек предстанет перед вами во всей красе

Answer 2

В классе outer - height=auto;

В классе inner - background-repeat: no-repeat;

Для центровки фона есть свойство background-position: center;

БЛОГ НА HUSL

Проблемы с height 100% и вертикальным центрированием и последующим отображением на мобилках с мелкой высотой экрана

Ответы (2 шт):