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

     

 

Image fit

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.

Image title

cover

Image title

contain

Image title

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.

Image title

contain

Image title

contain big images

Max container width

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.

 

Image title
Image title
Image title

Custom aspect ratio

 

Image title
Image title

Aspect ratio: auto

Use the aspect ratio of the image.

 

Image title

Custom border radius

 

Image title

Shadow

You can configure to use various shadows. Let's look at matching various images with various shadows. Notice that not all pairings look good.

 

Image title

none

Image title

increased contrast

Image title

shadow 8px 60%

Image title

none

Image title

increased contrast

Image title

shadow 8px 60%

Image title

none

Image title

increased contrast

Image title

shadow 8px 60%

Linkable, open in new window

You can turn the image into a clickable link. Optionally make it open in a new window.

 

ALT tag

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.

 

Custom alt tag

Empty state