Квадрат CSS по высоте

Можно ли сделать квадрат div с помощью css на основе высоты в пикселях?

Этот вопрос похож на этот (помечен как дубликат), но в этом случае я хочу установить высоту в пикселе или любой единице.

При использовании ширины существует простое решение:

.mydiv {
    height: 0;
    padding-bottom: 100%;
}

Но здесь 'height следует за шириной'. Я ищу решение, где 'width соответствует высоте'. Поэтому, если бы я установил height в 300px, width последует за ним.

Теперь я делаю это с помощью javascript, обновляя при изменении размера окна. Но я хотел бы найти решение для CSS, вот почему Я не ищу javascript-решение

Вот игровая площадка

Ответы

Ответ 1

Вы можете использовать новый viewport size units

JSfiddle

CSS

html,body {
    height: 100%;
    margin: 0;
}
div {
    background: red;
    height: 100vh;
    max-width:100vh;
    box-sizing: border-box;
}

Поддержка эффективно IE9 и