Som webbutvecklare hamnar du ofta i dilemmat att arbeta med HTML-element som - till skillnad från till exempel img-elementet - varken har en fast storlek eller ett fast bildförhållande. Ofta vill man se till att dessa objekt uppträder responsivt, men proportionen mellan bredd och höjd bibehålls. Som standard erbjuder CSS inte en intuitiv lösning här. Men med hjälp av den vertikala stoppningsegenskapen kan du uppnå ditt mål.
Låt oss ta ett vardagligt exempel med fyrkantiga produktbilder. Även om grafiken i sig inte nödvändigtvis är fyrkantig, vill vi visa den med ett bildförhållande på 1:1 utan extra ansträngning eller förvrängning, och deras bredd (och därmed höjd) bör ändras responsivt. Följande kod gör det enkelt att uppnå detta med CSS utan ytterligare markup.:
1bc3a80de3db90cdf0535541236d95f2
med resultatet:
Men varför fungerar detta och hur kan andra bildförhållanden skapas? Nyckeln till detta ligger i padding-egenskapen, som - specificerad i procentvärden - alltid är baserad på samma grundvärde som Width-egenskapen (nämligen bredden på det överordnade elementet). Detta är uppenbart för stoppning-vänster och stoppning-höger, överraskande för stoppning-top och stoppning-botten, 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: