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
.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.
object-fit and adapt your instance of the frame to rely on absolute positioning and hiding any overflow.
Photo by Steve Johnson on Unsplash