Возможно ли сделать квадратный блок авто ширины средствами HTML+CSS?

Question

[Ярослав Алексеенко]

Спасибо, что обратили внимание на мой вопрос, который состоит в следующем:

Возможно ли сделать блок (div) с авто шириной, у которого высота всегда равна ширине, только средствами html и css, без javascript?

Спасибо за ответы.

Answer 1

[Kir ---]

Оторвал бы руки, за то что ты пишешь вопрос курсивом

<div class="wrapper">
  <div class="box"></div>
</div>

.wrapper {
  width: 100px;
  margin: 0 auto;
}

.box {
  background: goldenrod;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50%;
  padding-bottom: 50%;
}

Comments

[Артур Мудрик]

Не нужно постить простыни кода — есть же jsfiddle.

[Ярослав Алексеенко]

Что за клан отрывателей рук :)))

[A K]

[Nikolay Talanov]

Артур Мудрик: почему тут так любят убогий jsfiddle когда есть codepen для нормальных белых людей?

[A K]

Nikolay Talanov: jsfiddle белый, codepen нет))

[Nikolay Talanov]

Symphony: первые раз 5 когда я открывал кодпен, примерно так же думал и боялся его. Но после почти года использования при виде фидла мне хочется плакать и покормить его, как исхудавшего, бездомного щенка.

[Артур Мудрик]

Кодепен полная лажа глючная, Жсфидл конфетка.

[A K]

Артур Мудрик: да

Answer 2

[Артур Мудрик]

Гуглите выражение css padding hack, тема стара как мир — это как раз то, как сделать высоту блока пропорциональной ширине блока. Вот песочница, меняйте ширину фрейма, квадратик будет пропорционально менять свои размеры.

Comments

[Фёдор Ананин]

Выражаю огромнейшую благодарность :) Как раз то, что нужно!