Layout: Frame

The frame layout is useful for cropping media (images and video) to a specific aspect ratio. It uses percentage padding to create a frame with a set aspect ratio (because padding is always based on the width of an element), which then acts as a window onto the content inside.

It is not recommended to apply the .l-frame class to the figure element, as this will obscure the figcaption if used. Instead, place it on an inner picture or div element.

Because .l-frame has a Flexbox context, we use align-items: center; and justify-content: center; to centre the child item both vertically and horizontally.

Internet Explorer/Edge considerations

The default frame layout uses object-fit: cover for images and videos. This is not supported in Internet Explorer or Edge prior to version 16 and in Edge 16-18 it is only supported on images. However, the Chromium Edge browser, which does support object-fit, is now available to systems as far back as Windows 7.

For images, a simple JavaScript workaround is available that swaps the image for a background-image instead, although this removes the accessibility benefits offered by images. Alternatively, you may prefer to forgo object-fit and adapt your instance of the frame to rely on absolute positioning and hiding any overflow.

Image credit

Photo by Steve Johnson on Unsplash