Overview of Box mode and Img mode
Box mode and Img mode handle images differently. Choose the mode that best fits the look you want and what you're trying to achieve.
Point: The difference between Box mode and Img mode
Box mode: The image is treated as a "box" with a background image.
Img mode: The image is treated as an "image element" that preserves the original aspect ratio.
Mode | Characteristics | Use cases |
Box mode | Treats the image as a box background. Can contain child elements inside. | ・Use an image as a background |
Img mode | Treats the image as an element. | ・Display the image while keeping the original aspect ratio |
What you can do in each mode
Checking the differences in features makes it easier to decide which one to use.
Image action | Box mode | Img mode |
Add child elements to create a parent-child box structure | ○ | × |
Apply image background effects | ○ | × |
Display while preserving the original aspect ratio | × | ○ |
× | ○ |
Switching modes
Select the image box and use the toggle in the upper right to switch modes.
Box mode features
Box mode is well-suited for situations where you want to use an image as a background.
You can add child elements to create a parent-child box structure. This is useful when you want to overlay text or buttons on top of an image.
You can apply image background effects.
Not suitable when you need to preserve the original aspect ratio.
Use cases
Use case | Reason |
Hero section background | You can overlay text or buttons on top of the image. |
Product list images | Display at a consistent size, regardless of each original image's aspect ratio. |
Decorative images | Adjust size, color, and brightness as a background. |
Note: If the image appears collapsed
An image box in Box mode is treated as an empty box when it doesn't contain any elements. As a result, if the width or height of a Box mode box is set to [auto] while empty, it may appear collapsed because there's no reference size.
However, if that image box is inside a parent box with the layout setting set to [Space between], the Box mode image will display correctly without collapsing even if its size is [auto].
Img mode features
Img mode is well-suited for situations where you want to treat an image as a standalone element.
Img mode displays the image at its original aspect ratio. So if you change the length of one side, the other side will be set to [auto].
You can set an alt attribute (alternative text).
You can't add child elements inside the box.
Image background effects aren't available.
Use cases
Use case | Reason |
Company logo | Displays at the original aspect ratio. |
Product photos | You can set an alt attribute. |
Group photos | Displays without cropping the edges of the original image. |
Tip: Double-click an edge of an image box on the screen to change that edge's size unit to [auto].
image picture
image photo asset image collapsed image disappeared image showing as a line