Ca dezvoltator web, te trezești adesea în dilema de a lucra cu elemente HTML care - spre deosebire de elementul img, de exemplu - nu au nici o dimensiune fixă, nici un raport de aspect fix. Adesea doriți să vă asigurați că aceste obiecte se comportă receptiv, dar proporția dintre lățime și înălțime este menținută. În mod implicit, CSS nu oferă o soluție intuitivă aici. Dar cu ajutorul proprietății de umplutură verticală vă puteți atinge scopul.
Să luăm exemplul obișnuit al imaginilor pătrate ale produselor. Deși elementele grafice în sine nu sunt neapărat pătrate, am dori să le afișăm cu un raport de aspect de 1:1, fără niciun efort suplimentar sau distorsiune, iar lățimea (și, prin urmare, înălțimea) lor ar trebui să se modifice în mod corespunzător. Următorul cod facilitează realizarea acestui lucru folosind CSS, fără niciun markup suplimentar.:
1bc3a80de3db90cdf0535541236d95f2
cu rezultatul:
Dar de ce funcționează acest lucru și cum pot fi create alte rapoarte de aspect? Cheia acestui lucru constă în proprietatea padding, care - specificată în valori procentuale - se bazează întotdeauna pe aceeași valoare de bază ca proprietatea Width (și anume lățimea elementului părinte). Acest lucru este evident pentru padding-left și padding-right, surprinzător pentru padding-top și padding-bottom, dar foarte util în acest caz.
Dacă doriți un raport de aspect de 16: 9, de exemplu, alegeți lățimea valorilor: 100%; fundul de umplutură: 56,25%;. Un raport de aspect care ține cont de raportul auriu este lățimea: 100%; fundul de umplutură: 61,81%; realizabil.
Cu ajutorul calcului puteți specifica direct raportul de aspect, de exemplu pentru 16: 9 cu fundul de umplutură: calc (1 / (16/9) * 100%). Dacă elementul constă din alte elemente imbricate, elementul copil este poziționat absolut pentru a compensa umplerea elementului părinte:
1bc3a80de3db90cdf0535541236d95f2
Acest lucru duce la următorul rezultat: