BoxモードとImgモードの概要
[Box] モードと [Img] モードは、画像の扱い方が異なります。使いたい表現や目的に応じて、適したモードを選びましょう。
Point：BoxモードとImgモードの違い
Boxモード：背景画像が設定された「ボックス」として扱われます。
Imgモード：元画像の比率が保持された「画像要素」として扱われます。
モード | 特徴 | 活用例 |
Boxモード | 画像をボックス背景として扱います。中に子要素を含むことができます。 | ・画像を背景として使う |
Imgモード | 画像を要素として扱います。 | ・元画像の比率を維持しまま画像を使う |
それぞれのモードでできること
機能の違いを確認すると、どちらを使うべきか判断しやすくなります。
画像に対する操作 | Boxモード | Imgモード |
子要素を追加して、親子ボックスの構造にする | ○ | × |
画像の背景加工を適用する | ○ | × |
元画像の縦横比を保って表示する | × | ○ |
alt属性（代替テキスト）を設定する | × | ○ |
モードを切り替える
画像ボックスを選択し、右上に表示されるトグルでモードを切り替えます。
Boxモードの特徴
Boxモードは、画像を背景として使う場面に向いています。
活用例
活用例 | 理由 |
ファーストビューの背景 | 画像の上にテキストやボタンを重ねられます。 |
商品一覧の画像 | 元画像の比率に依存せず、サイズを揃えて表示できます。 |
装飾用の画像 | 背景としてサイズや色味・明るさを調整できます。 |
注意：画像がつぶれて表示される場合
Boxモードの画像ボックスは、中に要素が入っていない場合、空のボックスとして扱われます。そのため、空の状態でBoxモードの幅や高さが [auto] になると、基準がないため表示がつぶれることがあります。
ただし、その画像ボックスの配置設定に[両端揃え]設定がされた親ボックスに入っている場合、boxモードの画像単位が[auto]でもつぶれずに表示されます。
Imgモードの特徴
Imgモードは、画像を独立した要素として扱う場面に向いています。
Imgモードは、元画像の縦横比のまま表示するモードです。そのため、片方の辺の長さを変更すると、もう片方の辺は [auto] になります。
alt属性（代替テキスト）を設定できます。
ボックス内に子要素は追加できません。
画像の背景加工は使えません。
活用例
活用例 | 理由 |
企業ロゴ | 元画像の縦横比を保って表示できます。 |
商品写真 | alt属性を設定できます。 |
集合写真 | 元画像の端が見切れずに表示できます。 |
Tips：スクリーン上で画像ボックスの辺をダブルクリックすると、辺のサイズ単位を [auto] に変更できます。
image picture
イメージ 写真 素材 画像が潰れる 画像が消える 画像が線になる