Skip to content

Instantly share code, notes, and snippets.

@dougkeeling
Created August 31, 2021 17:31
Show Gist options
  • Save dougkeeling/bdfeb8f5de2bd43eac56d8d3240ebb40 to your computer and use it in GitHub Desktop.
Save dougkeeling/bdfeb8f5de2bd43eac56d8d3240ebb40 to your computer and use it in GitHub Desktop.
[Define an aspect ratio for a <div>] Set the width and height and the aspect ratio will be determined automatically. #scss #css
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
}
// Example
.div {
@include aspect-ratio(16,9);
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment