The Image Fit stack is a great, simple way to add images to your Containers or Grid Items and have that image take up all of the available space (i.e. 100% width and 100% height).
Image source
You can opt to use either a local (drag and dropped image) or a warehoused image (by providing a url).
SEO / Accessibility
You can (and should) add an alt-tag for any image that you add. This is used by screen readers for those with visual impairments to describe the image.
You can also opt to add in a title. This will appear in a tooltip when the image is hovered over and is often looked for in SEO checks etc. Leave blank though if the image does not merit a title.
Custom Class
You can optionally add a custom class which is useful if you want to target the image with some of your own custom CSS.
Limit height
The default is for the image to fill all of the available space. There is the option though of limiting the height of the image (you can specify the height in pixels). This approach is especially useful when creating 'cards' using the Source Grid stacks as you could, for example, add an Image Fit stack at the top of each card and limit the height to 200px. Then, no matter what size or shape of image that you add, it will fill that 200px space without distorting.
Anchor point
You can set which point of the image is anchored so that if/when the image is cropped you do not lose any valuable visual information.
Example use case - Build your own gallery
Image Fit is especially useful if, for example, you want to hand build a thumbnail gallery using one of the Source Grid stacks. Dropping an Image Fit stack into a Grid Item will fill the available space regardless of the dimensions / aspect ratio of the image or the available space. Here is an example. The grid items here could of course also be linked to a lightbox stack (e.g. LimeLight by BWD) to show the full image if clicked.
Note
You will find that if you add content along with an Image Fit stack (e.g. in a Grid Item) then the content will not be seen. This is due to the image being sized to take up all of the space. If you do want to add some content (and not limit the height of the image) then there is a custom class that you can add to your content that will place it at the bottom of the image: img-fit-caption.
