Css высота такой же, как ширина

Я хотел бы сделать следующий трюк в моем файле css, чтобы width = height без установки пикселей. Я хочу сделать это так, независимо от разрешения браузера, иметь одинаковые значения в этих двух измерениях.

#test{
width: 20%;
height: (same as width);
}

Возможно ли это?

Ответ 1

Этот эффект можно просто подделать с помощью padding или margin, поскольку эти значения относятся к width контейнера для элемента.

div {
  background:orange;
  width:20%;
  padding-top:20%;
}

Отметьте http://jsfiddle.net/4z8PT/

Ответ 2

Вы также можете сделать это с помощью новых блоков просмотра CSS.

FIDDLE

CSS

div {
    background:pink;
    width:20vw; /* 20% of the viewport width */
    height: 20vw;
}

Поддержка очень хороша в современных браузерах (IE9 +) (caniuse)

Ответ 3

Вы можете использовать вертикальное заполнение для псевдоэлемента в%, поэтому он принимает ширину в качестве ссылки, а позволяет легко вставлять содержимое в этот квадрат.

В основном это может быть:

#test{
    width: 20%;
}
#test:before{
    content:'';
    padding:50% 0; /* vertical value as  100% equals width */
    display:inline-block;
}

или

#test{
    width: 20%;
    overflow:hidden;
}
#test:before{
    content:'';
    padding-top:100%; /* vertical value as  100% equals width */
    float:left;
}

http://codepen.io/anon/pen/bBrgl

Смотрите: http://dev.w3.org/csswg/css-box/#the-margin-properties для получения большего понимания или вертикального запаса/отступов в%