Som webbutvecklare är man ofta generad över att arbeta med HTML-element som i sig - till skillnad från img-elementet till exempel - varken har en fast storlek eller ett fast bildförhållande. Ofta vill du uppnå att dessa objekt beter sig lyhörd, men proportionen mellan bredd och höjd bibehålls. CSS erbjuder inte en intuitiv lösning här som standard. Men med hjälp av den vertikala stoppningsegenskapen kan du uppnå ditt mål.
Låt oss ta det dagliga exemplet med kvadratiska artikelbilder, vars grafik inte nödvändigtvis är kvadratisk, men vi vill visa dem med bildförhållandet 1: 1 utan extra ansträngning och framför allt utan distorsion, varigenom deras bredd (och därmed också höjden) förändras responsivt skall. Med följande kod är det väldigt enkelt att göra detta utan ytterligare markering med hjälp av CSS:
1bc3a80de3db90cdf0535541236d95f2
med resultatet
Men varför fungerar det och hur kan andra bildförhållanden skapas? Nyckeln till detta ligger i vadderingsegenskapen, som - ges i procentvärden - alltid baseras på samma grundvärde som egenskapen Bredd (nämligen bredden på det överordnade elementet). Med padding-left och padding-right är detta uppenbart, med padding-top och padding-bottom överraskande, men mycket användbart i det här fallet.
Om du till exempel vill ha ett bildförhållande på 16: 9 väljer du värdena bredd: 100%; stoppning-botten: 56,25%;. Ett bildförhållande som tar hänsyn till det gyllene förhållandet är bredd: 100%, stoppning-botten: 61,81%; realiserbar.
Med hjälp av calc kan du direkt specificera bildförhållandet, till exempel för 16: 9 med padding-bottom: calc (1 / (16/9) * 100%). Om elementet består av ytterligare kapslade element, placeras underelementet absolut för att kompensera för vadderingen av det överordnade elementet:
1bc3a80de3db90cdf0535541236d95f2
Detta leder till följande resultat: