Source

Image Fit stack - usage examples

Cards 1

Using Image Fit stack to create consistently sized images at the top of 'cards'. Here we have set the height to be 200px and any image that we use (regardless of its shape and size) will crop to this height while still covering all of the available space and maintaining the aspect ratio of the image.

Image Grid

Here we are using Image Fit within a Grid Plus stack to create a grid of images. By using Image Fit, any images that are used in a grid item will (by default) fill all of the available space in that grid item. This means that we can create a perfect grid of images that scales perfectly.

Image Grid 2 (without Image Fit!)

This is the exact same Grid Plus set up as used in the previous example but this time we are using the regular Image stack as opposed to Image Fit. You'll see that there is a lot of gapping and it is much less neat.

Cards 2

A few more examples of creating 'card' type layouts. 3 of the 4 items have the Image Fit stack limiting the height of the image (to 200px on small screens and 300px on larger screens) while the other one fills all of the available space.