Как сделать Резиновый квадрат с контентом?

Question

[Banny_Boom]

Как правильно сделать резиновый квадрат?
сейчас у меня так:

<div class="wrapper_square">
    <div class="square">
            <img src="...">
    </div>
</div>

CSS:

.wrapper_square{
font-size:1%
}
.square{
width: 13em;
height: 13em;
}
.square img{
height:100%;
}

НО, так не нормально, потому что все работает так же как если бы я указывал раззмеры в vw/vh.

Answer 1

[Амир Алимжанов]

width:10vh;
height:10vh;

будет уменьшаться относительно высоты.

width:10vw;
height:10vw;

относительно ширины

Comments

[Амир Алимжанов]

Можно еще через padding-bottom, так как padding и margin берут значения ширины блока. VW и vh не подлерживаются safari. P.S. давно сюда не заходил

Answer 2

[Сергей Петроченко]

Думаю квадрат у вас не выйдет резиновый, поскольку его резиновость пойдет в ту или иную сторону взависимости от контента, может быть только на js спрограммировать, но тоже сомнительное занятие.

Comments

[Banny_Boom]

с js знаю решение, но не хотелось бы прибегать лишний раз к js)

[Сергей Петроченко]

На чистом css не уверен что получится пропорционально изменять блок! только если в него квадраного ребенка вставлять))) типо картинки

[Banny_Boom]

Сергей Петроченко: тогда это выйдет статичный квадрат :c

[Сергей Петроченко]

Даже не знаю что сказать) думаю ничто не пострадает если вы все-таки jquery примените, к блоку нужному jQuery(".square").on("resize",function(){
ну а тут вычисляйте размеры типо что больше высота или ширина и в зависимости от этого , одно под другое подстраивается
});

[Саша]

100% на 100% азахха

Answer 3

[Денис Васильев]

jsbin.com/veqoli/edit?html,css,output