Skip to content

Instantly share code, notes, and snippets.

@Bengejd
Last active February 10, 2019 20:50
Show Gist options
  • Save Bengejd/216322a1b2e5c59e03ba5ca304f1f39c to your computer and use it in GitHub Desktop.
Save Bengejd/216322a1b2e5c59e03ba5ca304f1f39c to your computer and use it in GitHub Desktop.
Maintain aspect ratio in scss (height = width).
@mixin aspectRatio($ratio: '1:1', $width: 100%) {
width: $width;
@if($ratio == '1:1') {
padding-top: 100%; /* 1:1 Aspect Ratio */
}
@else if($ratio == '16:9') {
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
@else if($ratio == '4:3') {
padding-top: 75%; /* 4:3 Aspect Ratio */
}
@else if($ratio == '3:2') {
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
@else if($ratio == '8:5') {
padding-top: 62.5%; /* 8:5 Aspect Ratio */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment