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

Question

[narem]

Пытаюсь сделать адаптивную картинку на разрешение 16:9
По макету максимальная ширина сетки max-width: 1180px;
На разрешении 1440 когда враппер достиг максимальной ширины у баннера максимальная высота должна быть 400px если меньше, уменьшается в соотношении 16 к 9.
У меня не получается ограничить высоту, кто-то может подсказать как это сделать,

<section class="banner">
                <div class="wrapper banner__wrapper">
                    <div class="banner__container">
                        <p class="banner__title">Время экспортировать!</p>
                        <p class="banner__description">Текст текст текст</p>
                    </div>
                </div>
            </section>

.wrapper {
    max-width: 1180px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
}

.banner__container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 197px 20px 96px;
    text-align: center;
    background-image: url('https://via.placeholder.com/1000x320');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    border-radius: 0 0 25px 25px;
}

.banner__wrapper {
    position: relative;
    padding-bottom: 56.25%;
}

.banner {
    margin-bottom: 54px;
    max-height: 400px;
}

Comments

[ThunderCat]

а причем тут картинка? Вы же вроде блоками в итоге оперируете, картинке насрать как быть вписанной в бг контейнера...

[narem]

ThunderCat, ну как сделать блок максимальной высоты...

Answer 1

[ThunderCat]

у баннера максимальная высота должна быть 400px если меньше, уменьшается в соотношении 16 к 9.

.banner {
    margin-bottom: 54px;
    max-height: 400px;
    height: auto;
}

Естественно .banner__wrapper должен быть правильных размеров.