@Vakov

Как средствами HTML + CSS настроить динамическую адаптивную высоту блоку?

Есть сайт с адаптивным дизайном, хочется сделать на нем блок в следующем виде:
чтобы при ширине экрана 360 высота блока составляла 250px, ширина на весь экран.
при ширине экрана 650 высота блока составляла 450px, ширина на весь экран.
при изменение ширины экрана с 650 до 360, чтобы высота блока плавно менялась от 450px к 250px, к примеру при ширине экрана 600 высота блока составляла примерно 410px.
При изменение ширины экрана более 650 - сохранять высоту 450 и выравнивать блок по центру.
  • Вопрос задан
  • 1071 просмотр
Решения вопроса 2
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
(псевдокод):
margin: 0 auto;
height: 69vw;
min-height: 250px;
max-height: 450px;
Ответ написан
Комментировать
@BarryHAllen
<div class="container"> </div>

.container {
   background-color: lightblue;
   position: relative;
   width: 100%;
   padding-top: 69%;
}

@media (min-width: 650px) {
   .container {
     height: 450px;
     width: 650px;
     margin: 0 auto;
     padding-top: 0!important;
   }
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Madeas
@Madeas
UI / UX Designer, Frontend Developer
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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