Adding images to your Reactive pages is simple with the Image Element, which you can find in the Elements library on the left side of the editor.
To upload and place an image:
Drag and drop the Image Element onto your page.
In the settings panel on the right, click Choose Image.
From the Media Library window that opens, either upload a new image or select one that has already been uploaded.
Click Apply to insert the image into your page.
In the Dimensions dropdown, you can adjust Min Height and Max Width. This makes it easy to reuse the same Image Element across multiple screen sizes while customizing its size for each view.
Min Height – by default, this field is blank. If you enter a value, the image will always be at least that tall, but it can expand taller if space allows.
Max Width – this value defaults to the original width of the uploaded image. You can adjust it to help maintain the aspect ratio or to prevent the image from stretching too wide on larger screens.
The Image Fit setting controls how your image behaves inside its container:
Contain – the default setting. Resizes the image to fit entirely within the container while keeping it centered.
Cover – scales the image so that it completely fills the container. If the image is larger than the container, it will automatically crop to fit. This is ideal for making images responsive and avoiding blank space.
Fill – stretches the image to completely fill the container’s width and height, even if this distorts its proportions.
Auto – displays the image at its original dimensions, without resizing to fit the container.
The Aspect Ratio field allows you to control the height and width of an image within the Image Element.
You can find this field in the Dimensions tab of the right sidebar when the image is selected. By default, Reactive will detect the image’s original aspect ratio and display it in the controls. Adjusting these values will change the shape of the image. To reset to the original ratio, click the Auto button.
The Border Radius style setting can be used to create rounded images—or even perfect circles.
Example:
Setting the Border Radius to 50% will create a circular image (works best with square images).
Setting it to 10px will create softly rounded corners without making the image fully circular.
Images in Reactive can also be made clickable. Simply add a link in the settings panel so that when users click the image, they’ll be directed to the page or URL you specify.