Block要素の縦横比固定mixin。黄金比とかも。

備忘なり。

_fixed-ratio-box.scss

@mixin fixed-ratio-box($width:'100%', $height:'100%') {
    position: relative;
    width: #{$width};
    height: auto;

    &:before {
        content: '';
        display: block;
        padding-top: #{$height};
    }

    > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

// 黄金比とか
.golden-ratio-box {
    @include  fixed-ratio-box('100%', '70.72%');
}

// 画像サイズの縦横比維持 - 背景画像を使う時とか便利
.origin {
    @include  fixed-ratio-box('100%', percentage(image-height('origin.png') / image-width('origin.png')));
}

黄金比ボックスの使い方。

golden-box.jade

div.box.golden-ratio-box
    div.box-inner
        p 黄金比ボックス