• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Skalowanie diva, podobnie jak zdjęcia

Object Storage Arubacloud
0 głosów
492 wizyt
pytanie zadane 25 lutego 2019 w HTML i CSS przez MrxCI Dyskutant (8,260 p.)

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?

2 odpowiedzi

+1 głos
odpowiedź 25 lutego 2019 przez pirouetti Mądrala (6,490 p.)
wybrane 25 lutego 2019 przez MrxCI
 
Najlepsza

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.

+1 głos
odpowiedź 25 lutego 2019 przez PolYGlok Pasjonat (19,450 p.)

Spróbuj tego.

komentarz 25 lutego 2019 przez MrxCI Dyskutant (8,260 p.)
Ś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.

Podobne pytania

+1 głos
3 odpowiedzi 7,047 wizyt
pytanie zadane 21 października 2015 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
0 odpowiedzi 125 wizyt
–1 głos
1 odpowiedź 480 wizyt
pytanie zadane 9 września 2016 w HTML i CSS przez Rafik Obywatel (1,870 p.)

92,661 zapytań

141,557 odpowiedzi

319,999 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...