Compass(Sass)で画像サイズを自動取得する

goto_jp 1,989views 更新:2014年3月27日

以前の記事で何の説明もなしにしれっと使いましたが、結構便利なCompass関数です。

.image {
    width: image-width("../img/example.png");
    height: image-height("../img/example.png");
}

CSSは下記のように出力されます。
指定した画像のサイズを自動的に出力してくれます。

.image {
    width: 200px;
    height: 100px;
}

iPhoneのRetinaディスプレイ用など、大きい画像を半サイズで表示させたい時にも、Sassならプロパティ内で計算できるので便利です。

.smp-image {
    width: image-width("../img/example.png") / 2;
    height: image-height("../img/example.png") / 2;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません