Как сверстать резиновый квадрат с помощью чистого CSS?

Question

[Dvorak]

Как с помощью чистого CSS сверстать резиновый квадрат? Раньше юзал следующий код, но он почему-то не работает на маленьких экранах

#book-content {
   	width: 41%;
   	position: relative;
   	background-color: hsla(0, 0%, 0%, 0.5);
   	margin-left: 3em;
   	padding: 1%;
   	overflow: hidden;
   }

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

Answer 1

[Андрей]

вроде все работает https://jsfiddle.net/dbvq1nzf/

Comments

[Dvorak]

Будь я верующим, обязательно помолился бы за вас. Спасибо

[Vladimir T]

поясните, а зачем использовать :before ? https://jsfiddle.net/8q8wm997/

[Андрей]

Vladimir T: Можно и так. просто, когда у тебя в before - удобней считать aspect ratio например 9:12 = 9/12 = 0.75 = 75%

Answer 2

[Алексей Струков]

Самый простой способ это сделать ширину = 0, и например padding: 25%
Получим квадрат который будет занимать половину ширины своего контейнера