A carousel with some images
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: coverto 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.
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.