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

Question

[Vakov]

Есть сайт с адаптивным дизайном, хочется сделать на нем блок в следующем виде:
чтобы при ширине экрана 360 высота блока составляла 250px, ширина на весь экран.
при ширине экрана 650 высота блока составляла 450px, ширина на весь экран.
при изменение ширины экрана с 650 до 360, чтобы высота блока плавно менялась от 450px к 250px, к примеру при ширине экрана 600 высота блока составляла примерно 410px.
При изменение ширины экрана более 650 - сохранять высоту 450 и выравнивать блок по центру.

Answer 1

[ⓒⓢⓢ]

(псевдокод):

margin: 0 auto;
height: 69vw;
min-height: 250px;
max-height: 450px;

Answer 2

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

Answer 3

[Andrej Sharapov]

Может быть поможет