配置した画像素材に様々なスタイルを加えることができます。

※Imgモードでは「ブレンドモード・フィルター・背面フィルター」のみ設定可能です。

この機能は主に背景画像のサイズを指定する際や、画像を切り取って一部の表示にしたい際に使用します。画像のサイズ調整方法は4パターンです。

1. cover

coverはBoxサイズの縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小します。

Boxサイズを横幅100%にして「cover」に設定すると、簡単に画像を画面幅最大に設定することができます。

2. contain

containは画像の縦横比は保持して、背景領域に収まる最大サイズになるように画像を拡大縮小します。

3. px (ピクセル)

pxは画像の比率は変えずに横幅の指定ができます。

親ボックスがBoxのサイズになり、子ボックスの画像のサイズが指定できるため、親ボックスよりも大きい場合は、画像のはみ出た部分は切り取られて表示されます。

4. %（パーセンテージ）

背景領域に対する画像の幅をパーセンテージで指定することができます。

レスポンシブデザインの対応にはパーセンテージを使うと、デバイスの横幅に合わせて画像サイズの比率が変わるので便利です。

画像をタイルのようにリピートをして全体に並べたい場合に活用できる機能です。画像ボックスの「リピート」を選択すると、画像ボックスの余白の部分を画像が全面に繰り返し表示することができます。デフォルトでリピートモードがオンの状態になっております。

画像の起点位置を調整できます。

デフォルトで中央を基準に配置されますが、画像ボックスの「ポジション」から位置調整をすると、画像の基点を中央、上下左右、四隅のいずれかに変更できます。

image picture filter

イメージ 写真 素材