Seitenverhältnis beibehalten Mixin

Dieser Artikel vom Juli 2013 beschreibt eine Methode, mit Pseudoelementen das Seitenverhältnis eines Elements beizubehalten, auch wenn es skaliert.

Hier ist ein Sass-Mixin, das die Mathematik etwas 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 Klasse "content" innerhalb Ihres anfänglichen Blocks verschachteln. So:

<div class="sixteen-nine">
  <div class="content">
    insert content here
    this will maintain a 16:9 aspect ratio
  </div>
</div>

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 wurde hinzugefügt, um zu zeigen, wie das Element beim Ändern der Größe das zugewiesene Seitenverhältnis beibehält.

Siehe den Pen Maintain Aspect Ratio Demo von Sean Dempsey (@seanseansean) auf CodePen.

Danke an Sean Dempsey (@thatseandempsey) dafür!