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.
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.