Si një zhvillues ueb, shpesh e gjeni veten në dilemën e punës me elementë HTML që - ndryshe nga elementi img, për shembull - nuk kanë as një madhësi fikse dhe as një raport fiks të pamjes. Shpesh ju dëshironi të siguroheni që këto objekte të sillen në mënyrë të përgjegjshme, por proporcioni midis gjerësisë dhe lartësisë ruhet. Si parazgjedhje, CSS nuk ofron një zgjidhje intuitive këtu. Por me ndihmën e veçorisë së mbushjes vertikale ju mund të arrini qëllimin tuaj.
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 kjo dhe si mund të krijohen raporte të tjera të aspektit? Çelësi për këtë qëndron te vetia e mbushjes, e cila - e specifikuar në vlerat e përqindjes - bazohet gjithmonë në të njëjtën vlerë bazë si vetia Width (domethënë gjerësia e elementit prind). Kjo është e qartë për mbushje-majtas dhe mbushje-djathtas, befasuese për mbushje-lart dhe mbushje-fund, 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: