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

Question

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

.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;
}

<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>

Answer 1

Вам так нужно?

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

.banner__container {
    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: 100% auto;
    color: #ffffff;
    border-radius: 0 0 25px 25px;
}

.banner__wrapper {
    position: relative;
}

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

    <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>

БЛОГ НА HUSL

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

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