Si një zhvillues uebi, ju shpesh keni turp të punoni me elemente HTML që vetvetiu - në kontrast me elementin img, për shembull - nuk kanë as një madhësi fikse dhe as një raport të fiksuar. Shpesh ju doni të arrini që këto objekte të sillen në mënyrë të përgjegjshme, por proporcioni midis gjerësisë dhe lartësisë ruhet. CSS këtu nuk ofron një zgjidhje intuitive si parazgjedhje. Por me ndihmën e pronës vertikale të mbushjes mund të arrini qëllimin tuaj.
Le të marrim shembullin e përditshëm të imazheve të artikujve katrorë, grafikët e të cilave nuk janë domosdoshmërisht katrore, por ne do të dëshironim t'i shfaqim ato me raportin e pamjes 1: 1 pa përpjekje shtesë dhe mbi të gjitha pa shtrembërim, me anë të të cilave gjerësia (dhe kështu edhe lartësia) e tyre ndryshojnë në mënyrë të përgjegjshme duhet të Me kodin e mëposhtëm është shumë e lehtë për ta bërë këtë pa shënime shtesë me ndihmën e CSS:
1bc3a80de3db90cdf0535541236d95f2
me rezultatin
Por pse funksionon dhe si mund të krijohen raporte të tjera të aspektit? Çelësi i kësaj qëndron në vetinë e mbushjes, e cila - dhënë në vlera përqindjeje - bazohet gjithmonë në të njëjtën vlerë bazë si vetia Gjerësia (domethënë gjerësia e elementit prind). Me mbushjen majtas dhe mbushjen djathtas kjo është e qartë, me pjesën e sipërme të mbushjes dhe pjesën e poshtme të mbushjes befasuese, por shumë e dobishme në këtë rast.
Për shembull, nëse doni një raport aspekt prej 16: 9, ju zgjidhni vlerat gjerësia: 100%; mbushja fund: 56.25%;. Një raport i aspektit që merr parasysh raportin e artë është gjerësia: 100%; fundi i mbushjes: 61.81%; e realizueshme.
Me ndihmën e calc mund të specifikoni drejtpërdrejt raportin e pamjes, për shembull për 16: 9 me fundin e mbushjes: calc (1 / (16/9) * 100%). Nëse elementi përbëhet nga elementë të mëtejshëm, të ngulitur, elementi fëmijë pozicionohet absolutisht për të kompensuar mbushjen e elementit prind.:
1bc3a80de3db90cdf0535541236d95f2
Kjo çon në rezultatin e mëposhtëm: