Use this to add images to your page content.
You can also create image links, add mouse over effects, and link to a large image.
The below images have been added in responsive columns. Try to change the viewport size (eg check on a smartphone or change the size of your browser window) to see, how the image size changes.
This is an SVG
Mouse over
Title on mouse over and large image on click
Mouse over and large image
Simple image link
Image link with mouse over
Image link combined with link to large image
Multiple image links including one to large image and one to download it
A full width area with a background image that can have responsive height ("viewport" or in any CSS unit). The background image can either always cover the whole area or fit its height.
The maximum width of an image is always 100% of its container.
Therefore, adding an image which has a width equal to or larger than the container will make it fit exactly to that container.
In the below example the container of the image is a full width content section. The original image has a width of 2000px. Thus, on any screen with a horizontal resolution of 2000px or less, the image will span all width.
You can safely add even larger images, because on smaller screens a responsive image logic automatically makes sure to convert the image that is downloaded to a size that fits the actual screen resolution.
You can also add multiple images in a single row in a full width content section.