Dieser Artikel vom Juli 2013 beschreibt eine Methode zur Verwendung von Pseudo-Elementen, um ein Seitenverhältnis der Elemente beizubehalten, auch wenn es skaliert.
Hier ist ein Sass-Mixin, das die Mathematik ein wenig vereinfacht.
@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; ) )Das Mixin geht davon aus, dass Sie ein Element mit der Inhaltsklasse in Ihrem Anfangsblock verschachteln. So was:
insert content here this will maintain a 16:9 aspect ratio Die Verwendung des Mixins ist so einfach wie:
.sixteen-nine ( @include aspect-ratio(16, 9); )Ergebnis:
.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 ist eine Demo, die den obigen Code in Aktion zeigt. Die Animation wird hinzugefügt, um das Element anzuzeigen, das das zugewiesene Seitenverhältnis bei der Größenänderung beibehält.
Weitere Informationen finden Sie in der Demo zur Pflege des Seitenverhältnisses von Sean Dempsey (@seanseansean) auf CodePen.
Vielen Dank an Sean Dempsey (@thatseandempsey) für diesen einen!