Create a thumbnail image (or whatever) that is constrained to a particular aspect ratio.

aspect_ratio.scss

// padding to force an aspect ratio
// -> apply mixin to a container element, and the child element will be constrained
// -> mostly used for images, but should work on basically anything
@mixin media-aspect($w, $h, $child_el: ".media-aspect-content") {
    position: relative;
    overflow: hidden;

    &::before, &:before {
        display: block;
        content: " ";
        width: 100%;
        padding-top: (($w/$h) * 100%);
    }

    #{$child_el} {
        @include color('well', 'background-color');
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@mixin media-kill-aspect {
    &:before, &::before {
        content: none;
    }
}

/* Usage:
 *
 * <a class="media-aspect-1-2">
 *    <span class="media-aspect-content" style="background-image: url('[IMAGE HERE]');">ALT TEXT IF NEEDED</span>
 * </a>
 *
 * Use whatever containers you want; it's just padding and background images. "Content" must be nested.
 */