Как делать резиновые блоки по высоте?

Question

[DeniSidorenko]

Добрый день, надо создать такую структуру

Левое изображения имеет 960x960 и занимает 50% экрана, т.е сам экрана 1920 ( 960* 2) . Но как быть если экран будет 1600, тогда изображения будет занимать так же 50% и будет иметь 800px однако высоту я не могу подогнать под ширину. Можно ли сделать что бы высота была ровна ширине( без js)?

Comments

[Alams Stoyne]

Если ширина страницы будет 1600 то и контентная часть меньше
На макете картинка больше 2000 px по ширине тут вопрос к дизайнеру что будет при разрешении меньшем чем его чудо макет.
А вообще все элементы должны пропорционально уменьшаться а блоки с кнопками по высоте зависеть от картинок

Answer 1

[Alams Stoyne]

<div class="ratio">
    <div class="ratio-inner ratio-1-1">
        <div class="ratio-content">
            Это содержимое блока 1/1
        </div>
    </div>
</div>

.ratio {
    width: 150px; /* здесь можно установить любую нужную ширину */
}

.ratio-inner {
    position: relative;
    height: 0;
    border: none;
}

.ratio-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #eee;
}
.ratio-1-1 {
    padding-top: 100%; /* здесь можно установить пропорцию высоты в % отношении от ширины */
}