Как сделать блок с фиксированным соотношением сторон на всю страницу на CSS?
А как он может сохранять пропорции и оставаться при этом на весь экран? У экранов то пропорции разные.
Применяй единицы измерения 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;
}