Mixin for Aspect Ratio
Fri Oct 02 2020 17:33:07 GMT+0000 (Coordinated Universal Time)
Saved by
@rstringa
@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;
}
}
// Example
.sixteen-nine {
@include aspect-ratio(16, 9);
}
content_copyCOPY
Comments