Как сделать блок с фиксированным соотношением сторон на всю страницу на CSS?

Question

[Дмитрий Петров]

Привет всем. Как сделать блок с фиксированным соотношением сторон на всю страницу на CSS?
Он должен сохранять пропорции независимо от пропорций экрана.

Answer 1

[Rsa97]

А как он может сохранять пропорции и оставаться при этом на весь экран? У экранов то пропорции разные.

Comments

[Роман]

прям задача на 7 параллельных красных линий

[Rsa97]

Роман: Вообще-то семь прямых, перпендикулярных друг-другу, причём сколько-то синим цветом, сколько-то невидимых, а одна в форме котёнка.

[Евгений Петров]

Rsa97: Наши клиенты не любят слово «невидимые». Мы предпочитаем говорить «линии нарисованы прозрачным цветом».
Пы.Сы. Кстати, в отдельных случаях в CSS это именно так:)

Answer 2

[Pretor DH]

Применяй единицы измерения vmin, vmax, vw, vh.

Например: JSFiddle

.proportionale {
    position:absolute;
    width: 100vmin;
    height: 66vmin;   /* соотношение всегда будет 3/2 */
}
@media orientation: portrait { 
.proportionale {
    position:absolute;
    width: 66vmin;
    height: 100vmin;   /* при портрете соотношение всегда будет 2/3 */
}  
}

Только соблюдать правила:

• 100vmin указывать к той сороне которая должна быть ограничительной;
  
• если указываете больше 100vmin быть готовым что контент будет вылазить за границы при пропорциях близких 1/1.
  

Еще есть вариант с флексбоксом.

main {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;

    width:90%;
    margin: auto;
}
section {
    order: 0;
    flex: 0 1 60vw;
    align-self: stretch;    
    
    outline:blue 1px solid;
}