A carousel with some images

Waterfall in Yosemite National Park. By Nathan Dumlao.
The Golden Gate Bridge facing north. By Oliver Planter.
Stairs leading down to a beach. By Khachik Simonian.

The images above use object-fit: cover to fill the area of the carousel. This avoids leaving blank area around the images on the page. Going to the lightbox allows users to see the full picture as well as zoom-in with a double tap.

Going from a square crop, using object-fit: cover

In many cases, the most interesting portion of an image is in the center. You can use object-fit: cover to get the center portion of an image within some desired size. The user can see the edges of the picture when they go to lightbox mode.

Using object-position

If the center of the image is not the portion you want to focus on, you can use the object-position property to change the visible portion. The above example uses object-position: center 30%; to align the top of the image area with the point that is 30% from the top along the vertical axis of the image.

This allows the top portion of the waterfall to be completely visible. Adding some room at the top for the transition to the lightbox makes the transition feel nicer that if we had simply aligned to the top of the image.