Dit artikel uit juli 2013 beschrijft een methode om psuedo-elementen te gebruiken om een aspectverhouding van elementen te behouden, zelfs als deze wordt geschaald.
Hier is een Sass-mixin die de wiskunde een beetje vereenvoudigt.
@mixin aspect-ratio($width, $height) ( position: relative; &:before ( display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; ) > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; ) )De mixin gaat ervan uit dat je een element nestelt met de inhoudsklasse in je eerste blok. Zoals dit:
insert content here this will maintain a 16:9 aspect ratio Het gebruik van de mixin is zo eenvoudig als:
.sixteen-nine ( @include aspect-ratio(16, 9); )Resultaat:
.sixteen-nine ( position: relative; ) .sixteen-nine:before ( display: block; content: ""; width: 100%; padding-top: 56.25%; ) .sixteen-nine > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; )Demo
Hier is een demo die de bovenstaande code in actie laat zien. De animatie wordt toegevoegd om te laten zien dat het element de toegewezen hoogte-breedteverhouding behoudt terwijl het formaat wordt gewijzigd.
Zie de demo over de beeldverhouding van de pen behouden door Sean Dempsey (@seanseansean) op CodePen.
Met dank aan Sean Dempsey (@thatseandempsey) voor deze!