Als webontwikkelaar sta je vaak voor het dilemma om met HTML-elementen te werken die - in tegenstelling tot bijvoorbeeld het img-element - noch een vaste grootte, noch een vaste beeldverhouding hebben. Vaak wilt u ervoor zorgen dat deze objecten zich responsief gedragen, maar dat de verhouding tussen breedte en hoogte behouden blijft. Standaard biedt CSS hier geen intuïtieve oplossing. Maar met behulp van de verticale opvullingseigenschap kunt u uw doel bereiken.
Laten we het alledaagse voorbeeld van vierkante productafbeeldingen nemen. Hoewel de afbeeldingen zelf niet per se vierkant zijn, willen we ze wel met een 1:1-verhouding weergeven zonder extra moeite of vervorming, en hun breedte (en dus hoogte) moet zich automatisch aanpassen. De volgende code maakt het eenvoudig om dit met CSS te bereiken, zonder extra markup.:
1bc3a80de3db90cdf0535541236d95f2
met het resultaat:
Maar waarom werkt dit en hoe kunnen andere beeldverhoudingen worden gecreëerd? De sleutel hiervoor ligt in de eigenschap opvulling, die - gespecificeerd in percentagewaarden - altijd gebaseerd is op dezelfde basiswaarde als de eigenschap Breedte (namelijk de breedte van het bovenliggende element). Dit is duidelijk voor opvulling-links en opvulling-rechts, verrassend voor opvulling-boven en opvulling-onder, 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: