microCMS

画像サイズ

最終更新日: 2020/05/17

w

画像のwidthを指定します。
例)?w=200

h

画像のheightを指定します。
例)?h=200

fit

画像の縦横比調整、切り取りや表示領域の最適化を行います。
デフォルトはclipです。

fit=clip

画像の縦横比を固定してリサイズします。
例)?fit=clip&w=200&h=200

fit=clamp

画像の切り抜きや歪みなしに指定した画像サイズにフィットさせます。 上下左右の端のピクセルを延長させた形になります。
例)?fit=clamp&w=200&h=300

fit=crop

画像を指定したサイズに拡大・縮小後・余白部分は切り落とします。
wとhの指定が必須です。
例)?fit=crop&w=200&h=200

cropクエリを用いるとさらに詳細を設定できます。
例)?fit=crop&crop=left,top&w=200&h=200

fit=fill

画像を指定したサイズに収まるように配置します。
余白部分をfill-colorで補います。
また、fill=blurを用いるとブラー画像を背景に配置することもできます。
例)?fit=fill&fill-color=3331cbf&w=200&h=200

fit=fillmax

元画像以上のサイズ指定を行い、画像をその中央に配置します。
余白部分をfill-colorで補います。
また、fill=blurを用いるとブラー画像を背景に配置することもできます。
例)?fit=fillmax&fill-color=3331cbf&w=700&h=400(元画像は600x300)

fit=max

指定したサイズ内に縦横比を固定しつつ画像を最大限配置します。
例)?fit=max&w=200&h=200

fit=scale

指定したサイズに画像を拡大・縮小します。
縦横比は維持されません。
例)?fit=scale&w=200&h=200