@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;
}
  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега CSS
{PHP, MySql, HTML, JS, CSS} developer
у баннера максимальная высота должна быть 400px если меньше, уменьшается в соотношении 16 к 9.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы