Привет. Возможности CSS расширяются с каждым днем, ещё совсем недавно, и подумать нельзя было о том, чтобы сделать круг на чистом CSS, сейчас уже можно считать моветоном созданием круга при помощи картинки. Сегодня мы рассмотрим как сделать так, чтобы на CSS высота равна динамической ширине была. Это, кстати, может пригодится при создании динамического круга на CSS.

Итак, мы столкнулись с ситуацией — есть блок, который изменяется по ширине динамически, вместе с экраном (например, задано в нём 25% ширины). Нужно сделать так, чтобы этот блок имел такую же высоту, как и ширину. Как это сделать? Ведь ширина в процентах? Раньше такое можно было сделать только на Javascript, но теперь нет!

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

содаржание

Это структура на HTML, теперь создадим код на CSS, чтобы это всё работало, и получилось сделать CSS высота равна динамической ширине.

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#rastyagivalka {
    margin-top: 100%;

}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
    border-radius: 50%;
}

Готово, блок динамически растягивается как по ширине, так и по высоте. Здорово, да? Теперь при изменении ширины объекта будет изменяться и его высота, это достигается благодаря значению margin-top: 100% у объекта растягивалка. Естественно, можно не скруглять углы у блока и тем более не делать их него круг — круг использован для примера, этот приём можно применить и для создания квадратных блоков (не прямоугольных, а именно квадратных).

А если вы не верите, что это работает, вот вам рабочий код на JSFiddle, посмотрите, поиграйтесь:

Если же вам нужно составить авансовый отчет, то приложение авансовый отчет андроид поможет вам это сделать быстро, качественно и, главное, онлайн и даже с вашего телефона. Замечательно, что такие важные процедуры, как составление ответов теперь приходят и в мобильные, что делает их создание более удобным.