Как сохранить соотношение сторон изображения при изменении размера

У меня есть такая ситуация, когда я хочу визуализировать div в виде квадрата, где высота определяет ширину. Пока что единственное решение, которое подходит очень близко, - это использовать изображение размером 1 на 1 пиксель:

<div class = "square">
    <img src = "data:image/gif;base64,R0lGODlhA...RAA7">
</div>

.square {
    display:inline-flex;
    height:100%;
    background:darkorange;
}

img {
    display:block;
    height:100%;
    width:auto;
}

(Источник) JSFIDDLE

Но что бы я ни пытался, при изменении высоты квадрат растягивается по вертикали (больше не квадрат). Вы должны нажать перезагрузить, чтобы снова сделать квадрат. Кажется, это происходит только в Chrome. Хотя в исходный пост предлагается использовать display: inline-flex для .square, похоже, это не работает. Может, я что-то упустил. Какие-либо предложения?