Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Написание постов, ведение соц сетей Ваших компаний. Формирование имиджа и контента.

от 22900 

Данный набор подходит всем, кто хочет уверенно продавать товары и услуги в интернете. Стоимость набора варьируется в зависимости от конкуренции рынка. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение.

от 119000 

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Сделать высоту равной ширине css

Для того, чтобы высота блока была равной его ширине в CSS, можно использовать специальный прием, используя псевдоэлементы и значение padding-top. Он позволяет установить высоту блока в процентном отношении к его ширине.

Например, для создания квадратного блока можно использовать следующий CSS-код:

.square {
  position: relative;
  width: 50%;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.square > div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Здесь мы создаем блок .square с шириной 50%. Затем мы используем псевдоэлемент ::before, чтобы задать высоту блоку. padding-top: 100% устанавливает высоту блока в 100% от его ширины, создавая неявно квадрат.

Затем мы создаем вложенный блок (.square > div), который займет всю площадь блока .square с помощью CSS-свойств position: absolute; top: 0; left: 0; bottom: 0; right: 0;.

Таким образом, блок .square будет просто блоком с заданной шириной, а его псевдоэлемент ::before сделает его квадратным. Вложенный блок .square > div может быть использован для наполнения контентом.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.