Som webudvikler står man ofte i dilemmaet med at arbejde med HTML-elementer, der – i modsætning til fx img-elementet – hverken har en fast størrelse eller et fast billedformat. Ofte vil man sikre sig, at disse objekter opfører sig responsivt, men forholdet mellem bredde og højde bibeholdes. Som standard tilbyder CSS ikke en intuitiv løsning her. Men ved hjælp af den lodrette polstringsegenskab kan du nå dit mål.
Lad os tage et hverdagseksempel med firkantede produktbilleder. Selvom grafikken i sig selv ikke nødvendigvis er firkantet, vil vi gerne vise den med et billedformat på 1:1 uden ekstra indsats eller forvrængning, og dens bredde (og dermed højde) skal ændres responsivt. Følgende kode gør det nemt at opnå dette ved hjælp af CSS uden yderligere markup.:
1bc3a80de3db90cdf0535541236d95f2
med resultatet:
Men hvorfor virker dette, og hvordan kan andre billedformater skabes? Nøglen til dette ligger i padding-egenskaben, som - angivet i procentværdier - altid er baseret på den samme grundværdi som Width-egenskaben (nemlig bredden af det overordnede element). Dette er indlysende for polstring-venstre og polstring-højre, overraskende for polstring-top og polstring-bund, men meget nyttigt i dette tilfælde.
Hvis du f.eks. Vil have et billedformat på 16: 9, skal du vælge værdierne bredde: 100%; polstring-bund: 56,25%;. Et billedformat, der tager det gyldne forhold i betragtning, er bredde: 100%; polstring-bund: 61,81%; realiserbar.
Ved hjælp af calc kan du direkte angive billedformatet, f.eks. For 16: 9 med polstring-bund: calc (1 / (16/9) * 100%). Hvis elementet består af yderligere indlejrede elementer, placeres underelementet absolut for at kompensere for polstringen af det overordnede element:
1bc3a80de3db90cdf0535541236d95f2
Dette fører til følgende resultat: