Разбиране как работят пропорционалните блокове в HTML
Представете си, че трябва да създадем такъв блок в HTML, чиято височина винаги да е относителна към ширината му. За съжаление в CSS няма такава мерна единица като отношение към стойността на друго свойство. Но има няколко трика за имитиране на това свойство. И сега ще ги анализираме.
Решение чрез
Всеки, който се занимава с оформление на HTML, знае, че ако етикетът е принуден да посочи ширина, но не и височина, тогава височината ще бъде изчислена автоматично от съотношението на височината към ширината на оригиналното изображение. По този начин можете да създавате пропорционални блокове с динамична ширина, ако поставите етикета вътре в тях.
Но използването на тази техника за създаване на пропорционални блокове не е рационално поради редица причини:
Решение чрез Javascript
Можете да запазите пропорционалното съотношение на страните на блока, като използвате функция на Javascript, която ще запомни първоначалното съотношение на страните на блока и след това ще извърши изчисления и ще зададе височина при настъпване на всяко събитие:
Такъв пример ще работи и ще ви позволи да „играете“ с пропорциите, но нека помислим: при какво събитие трябва да се извика тази функция? При събитие за преоразмеряване на прозорец? Може би. Но какво ще стане, ако ширината на контейнера се променя не от размера на прозореца, а от CSS анимация, или чрез flex, или чрез друг скрипт. Колко много нюанси ще трябва да се предвидят. Създайте интервал от време, който да преизчислява измеренията на всеки 100 ms? Всичко това прави сценария твърде тежък. И ако трябва да има няколко десетки пропорционални блока, тогава нашият браузър просто ще замръзне. Съответно тази опция също не е подходяща.
Правилното решение е чрез padding-bottom
Има естествено чисто CSS решение, което ви позволява да създавате пропорционалниблок, който не изисква зареждане на изображения и използване на спомагателни скриптове. Можете да създадете такава пропорционална кутия, като използвате специалната способност на CSS свойството padding-bottom/top за изчисляване на нейната стойност спрямо ширината на горния контейнер.
За да направим това, имаме нужда от три вложени div елемента:
Горният контейнер div.top ще има необходимата ширина, която може да бъде изразена във всяка мерна единица.
Ще зададем ширината на вложения контейнер div.top>div на 100%, т.е. вложеният блок винаги ще се простира до ширината на родителския контейнер. И ще зададем padding-bottom на вложеното div.top>div на съотношението височина към ширина като процент. Тези. ако искаме блок със съотношение 2:1, тогава стойността на padding-bottom трябва да бъде 50%.
Тъй като подложката по своята същност е подложката между ръба на блока и неговото съдържание, ние ще преместим третия и последен контейнер div.top>div>div извън слоя, като му дадем абсолютно позициониране и 100% ширина и височина. Ще публикуваме съдържание там.
По този начин, когато действителната ширина на родителския div.top се промени, padding-bottom на вложения div винаги ще заема височина, равна на 50% от ширината на div.top. И Vuole - получаваме пропорционален блок, изчислен от Css процесора.
Това просто решение е най-оптималния и продуктивен шаблон за създаване на пропорционални блокове в HTML, тъй като не зарежда браузъра с допълнителни графични файлове, нито изисква използването на Javascript.