W tym artykule z lipca 2013 r. Opisano metodę używania elementów pseudo do utrzymania współczynnika kształtu elementów, nawet podczas skalowania.
Oto miks Sassa, który nieco upraszcza matematykę.
@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; ) )Mieszanka zakłada, że będziesz zagnieżdżać element z klasą treści w początkowym bloku. Lubię to:
insert content here this will maintain a 16:9 aspect ratio Korzystanie z miksera jest tak proste, jak:
.sixteen-nine ( @include aspect-ratio(16, 9); )Wynik:
.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; )Próbny
Oto demo pokazujące powyższy kod w akcji. Animacja zostanie dodana, aby pokazać element zachowujący przypisany współczynnik proporcji podczas zmiany rozmiaru.
Zobacz demo Pen Maintain Aspect Ratio autorstwa Seana Dempseya (@seanseansean) na CodePen.
Podziękowania dla Sean Dempsey (@thatseandempsey) za to!