Si zhvillues uebi, shpesh e gjeni veten duke punuar me elementë HTML që, ndryshe nga elementi `img`, nuk kanë në thelb një madhësi ose raport aspekti të fiksuar. Shpesh, ju dëshironi që këto objekte të sillen në mënyrë reaguese duke ruajtur raportin midis gjerësisë dhe lartësisë. CSS nuk ofron një zgjidhje intuitive si parazgjedhje. Megjithatë, vetia e mbushjes vertikale mund ta arrijë këtë.
Le të marrim shembullin e përditshëm të imazheve katrore të produkteve. Ndërsa vetë grafikët nuk janë domosdoshmërisht katrorë, ne do të donim t'i shfaqnim ato me një raport aspekti 1:1 pa ndonjë përpjekje ose shtrembërim shtesë, dhe gjerësia e tyre (dhe për rrjedhojë lartësia) duhet të ndryshojë në mënyrë të përgjegjshme. Kodi i mëposhtëm e bën të lehtë arritjen e kësaj duke përdorur CSS pa ndonjë shënim shtesë.:
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: