Point：BoxモードとImgモードの違い
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
イメージ 写真 素材 画像が潰れる 画像が消える 画像が線になる