Aspect Ratio with Pseudo Element

[ajmueller]

On a client project recently we needed to limit the width of videos. To maintain aspect ratio, but also restrict width, the aspect ratio mixin had to be altered. This is what we used:

@mixin aspect-ratio($width: 16, $height: 9) {
    position: relative; // context for direct descendant

    // container to maintain aspect ratio
    &:before {
        content: '';
        display: block;
        padding-top: percentage(parseInt($height) / parseInt($width));
    }

This will require some more testing, but it should be a good enhancement to the functionality.

[chadian]

I handled something similar to this for my placeholder idea, which is really just an aspect ratio element with placeholder styling.

https://github.com/chadian/placeholder/blob/master/src/scss/_placeholder-mixin.scss

The implementation could possibly be cleaned up, but it's pretty robust to creating dimensional containers, including different ways of calculating the ratio. The ratio can be specified manually, or determined by the units given (or just use the units without a scalable ratio).

Examples: http://sticksnglue.com/placeholder/examples/ (scroll down to sass mixin)

Note: The mixin lightly makes use of maps which depend on sass 3.3.

[ajmueller]

Pull request #101 created. @chadian, I know you'd like to see some differences in the pseudo element to allow for multiple children. Can you provide some examples where this could really come in handy, but retain the usage for a single child?