Skalowanie diva, podobnie jak zdjęcia

Question

Witam!

Chce aby div przy zmniejszaniu szerokości strony, dopasowywał swoją wysokość tak aby miał to samo ratio rozmiaru np. 200/100px po zmniejszeniu szerokosci z 200px na np. 100px, aby powstal 100/50px

1000/200px

500/100px

250/50px

itd.

pierwsza wartosć to szerokość i chce aby wysokość (druga wartość) była od niej zależna.

 

W przypadku zdjęcia podziałał kod

.el {
width:50vw;
height:auto;
}

 

Lecz na diva bezposrednio umiesczonego w body już nie działa, jakieś pomysły?

Answer 1

Znalazłem w necie ratio.

.el {
  width: 100%;
  padding-bottom: 50%;
  background: black;
}

<div class="el"></div>

Wysokość diva będzie połowa szerokości zawsze.

Answer 2

Spróbuj tego.

Comments

Świetne na breakpointy i z załamania chyba kilka zrobie zamiast ratio przy użyciu viewportu

 

btw. przyklad byl na kilu, bo dla skalowania musi być x = y/5, bez znaczenia czy x jest 34, 67, 121, 651, 812 itd.