Sassでアスペクト比固定要素を簡単に作る

プログラムどころかhtmlやcssも全く分かっていなかったグラフィックデザイナー上がりの私ですが、htmlとcssはなんとかモノにできた(ハズ)。

未だJSは勉強中。
JSで簡単にできるかもしれないこともCSSでなんとかする変なスキルも身についてきました。

htmlとcssのみでdiv要素などのアスペクト比を固定したい場合にはパディングを使う方法がありますが、いちいちパーセンテージを算出するのは面倒です。

Sassで演算させれば誰でも簡単にできますね。

子要素として画像を入れ親要素にフィットさせたい場合には、親要素にクラスを追加するだけで幅基準か高さ基準のどちらかでフィットさせるように設定しておくともっと便利です。

html

<div class="image-ratio-1by1">
    <img src="http://sample.jpg">
</div>

アスペクト比固定に関する全体的な設定

SASS

/* アスペクト比固定の物全てに関与する指示 */
*[class*="image-ratio-"] {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;

    &::before {
        content: "";
        display: block;
        width: 100%;
        position: relative;
    }

    /* 他に何もクラスを入れていないと画像は横幅合わせで100% */
    img {
        display: block;
        position: absolute;
        top: -100%;
        bottom: -100%;
        left: -100%;
        right: -100%;
        margin: auto;
        width: 100%;
        height: auto;
    }

    /* height-fitクラスを追加すると画像は高さ合わせで100% */
    &.height-fit　img　{
        width: auto;
        height: 100%;
    }
}

比率を指定する設定

SASS

/* 16対9の場合 */
.image-ratio-16by9::before {
    padding-top: (9/16)*100%;
}

/* 3対2の場合 */
.image-ratio-3by2::before {
    padding-top: (2/3)*100%;
}

/* 1対1の場合 */
.image-ratio-1by1::before {
    padding-top: (1/1)*100%;
}

/* 黄金比の場合 */
.image-ratio-golden::before {
    padding-top: (1/1.618)*100%;
}

計算式の割り算の部分に数字を入れるだけだから簡単ですね。