Als webontwikkelaar schaam je je vaak om met HTML-elementen te werken die op zichzelf - in tegenstelling tot bijvoorbeeld het img-element - noch een vaste grootte, noch een vaste aspectverhouding hebben. Vaak wilt u bereiken dat deze objecten zich responsief gedragen, maar de verhouding tussen breedte en hoogte blijft behouden. CSS biedt hier standaard geen intuïtieve oplossing. Maar met behulp van de eigenschap verticale opvulling kunt u uw doel bereiken.
Laten we het alledaagse voorbeeld nemen van vierkante artikelafbeeldingen, waarvan de afbeeldingen niet noodzakelijk vierkant zijn, maar we willen ze zonder extra moeite en vooral zonder vervorming weergeven met de beeldverhouding 1: 1, waarbij hun breedte (en dus ook hoogte) responsief verandert zou moeten. Met de volgende code is het heel eenvoudig om dit zonder extra opmaak te doen met behulp van CSS:
1bc3a80de3db90cdf0535541236d95f2
met het resultaat
Maar waarom werkt het en hoe kunnen andere aspectverhoudingen worden gecreëerd? De sleutel hiervoor ligt in de padding-eigenschap, die - uitgedrukt in procentuele waarden - altijd gebaseerd is op dezelfde basiswaarde als de Width-eigenschap (namelijk de breedte van het bovenliggende element). Met opvulling-links en opvulling-rechts is dit duidelijk, met opvulling-boven en opvulling-onder verrassend, maar in dit geval zeer nuttig.
Als u bijvoorbeeld een aspectverhouding van 16: 9 wilt, kiest u de waarden breedte: 100%; opvulling-onderkant: 56,25%;. Een aspectverhouding die rekening houdt met de gulden snede is breedte: 100%, opvulling-onderkant: 61,81%; realiseerbaar.
Met behulp van calc kun je direct de aspect ratio specificeren, bijvoorbeeld voor 16: 9 met opvulling-bottom: calc (1 / (16/9) * 100%). Als het element uit meerdere geneste elementen bestaat, wordt het onderliggende element absoluut gepositioneerd om de opvulling van het ouderelement te compenseren:
1bc3a80de3db90cdf0535541236d95f2
Dit leidt tot het volgende resultaat: