Image Component

Jump to examples.

Each image style grouping will attempt to scale the images to a fixed height.

• Image styles that start with the word "Small" will resize the image to have a height of 220px.
• Image styles that start with the word "Medium" will resize the image to have a height of 500px
• Image styles that start with the word "Large" will resize the image to have a height of 800px

The different variations within a size group will crop the image so that its width meets the selected aspect ratio. Examples (using the "small" size"):

• "Small" will scale the image to 220px height and will scale the width to retain the original aspect ratio of the image.
• "Small 16:9" will scale the image to 220px height and width of 16/9*220px
• "Small 4:3" will scale the image to 220px height and width of 4/3*220px
• "Small square" will scale the image to 220px height and width of 220px
• "Small 3:4" will scale the image to 220px height and width of 3/4*220px (ie. portrait)

When you upload an image you can choose the focal point of the image.  When any cropping of the image occurs the focal point will be used as the center of the image.

When an image is placed onto a page, if the size of the image is greater than the size of the container that the image is placed into the browser will reduce the displayed size of the image so that it fits into the container.

For example, if you place a medium square image (500 x 500px) into an area that only has a width of 350px the image will display at a size of 350 x 350px.