Как создать квадратный блок в css?

Question

[Test]

.img1{
width:50%;

А как сформулировать height, чтобы он был равен px длины блока, в то время как длина блока зависит от длины страницы

Answer 1

[Никита]

очень просто

div {
  width: 30%;
  margin: auto;
  background: silver;
  overflow: hidden; /* clearfix */
}

div:before {
  content: "";
  padding-top: 100%;
  float: left;
}

Comments

[Test]

не робит((

[Test]

.img1 {
width: 30%;
}

.img1:before {
padding-top: 100%;
float: left;
}

[Олег]

А зачем тут float?

[Дмитрий]

fedor_dev: для img псевдоэлементы не работают + для псевдоэлементов :before и :after необходимо обязательно указывать content: '';

[Test]

Дмитрий: так это же просто название класса, а применяется он к блоку

[Дмитрий]

fedor_dev: значит content: ''; не указан

[Test]

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

[Дмитрий]

fedor_dev: можете оформить ваш код здесь https://jsfiddle.net или в другой песочнице?

[Test]

Дмитрий: весь документ?

[Дмитрий]

fedor_dev: только блок с картинкой, который не работает

[Test]

Дмитрий: странно, но отдельная часть кода работает нормально, возможно такой класс использует фреймворк

[Дмитрий]

fedor_dev: тогда получается конфликт css стилей

[Test]

Дмитрий: да, только я сомневаюсь, что .russia228337 может создать такой конфликт

[Test]

Дмитрий: загрузил фреймворк к https://jsfiddle.net но проблемы всё равно нет, возможно где то косяк в коде