Fast formatforhold for HTML-elementer

Som webudvikler er du ofte flov over at arbejde med HTML-elementer, der i sig selv - i modsætning til for eksempel img-elementet - hverken har en fast størrelse eller et fast billedformat. Ofte vil du opnå, at disse objekter opfører sig responsivt, men forholdet mellem bredde og højde opretholdes. CSS tilbyder ikke en intuitiv løsning her som standard. Men ved hjælp af den lodrette polstringsejendom kan du nå dit mål.


Lad os tage det daglige eksempel på firkantede artikelbilleder, hvis grafik ikke nødvendigvis er firkantet, men vi vil gerne vise dem med billedformatet 1: 1 uden yderligere indsats og frem for alt uden forvrængning, hvorved deres bredde (og dermed også højde) ændres responsivt skulle gerne. Med den følgende kode er det meget let at gøre dette uden yderligere markering ved hjælp af CSS:

1bc3a80de3db90cdf0535541236d95f2

med resultatet

 

Men hvorfor fungerer det, og hvordan kan andre billedformater oprettes? Nøglen til dette ligger i polstringsegenskaben, som - givet i procentværdier - altid er baseret på den samme grundlæggende værdi som breddeegenskaben (nemlig bredden på det overordnede element). Med polstring til venstre og polstring til højre er dette indlysende, med polstring-top og polstring-bund overraskende, 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:

...
Tilbage