Image shaper rectangle
Customize how an image is displayed on the page.
Configure:
aspect ratio (optional)
image fit
max width
border radius
shadow
alt tag
url, open in new window
Customize how an image is displayed on the page.
Configure:
aspect ratio (optional)
image fit
max width
border radius
shadow
alt tag
url, open in new window
The image is wrapped in a container. The aspect ratio applies to the image's container, not the image itself. When the image and the container have different aspect ratios, the question becomes how to fit the image into the container.
There are three options available:
cover
contain
contain big images
See the examples below. The black outline is used to show the size of the container.
cover
contain
contain big images
Note that when using cover, the image is cropped.
While using contain both shrinks large images and enlarges small images, using contain big images only shrinks large images but does not enlarge them. See the examples below, this time, using the same image that is smaller than the container.
contain
contain big images
Customize how large the image container can be at most. If there is less space, the image container will always shrink to be no bigger than that.
Use the aspect ratio of the image.
You can configure to use various shadows. Let's look at matching various images with various shadows. Notice that not all pairings look good.
none
increased contrast
shadow 8px 60%
none
increased contrast
shadow 8px 60%
none
increased contrast
shadow 8px 60%
You can turn the image into a clickable link. Optionally make it open in a new window.
You can customize the ALT tag. It is technically a HTML attribute used to tell robots and screen readers what the image contains. It is also used as a placeholder for the image in case the image can not be loaded.
You can only observe the alt tag by looking at the source code of this page. The alt tag of the image below is set to Custom alt tag.
