Frame

Wrap an img, video, picture, or iframe element in a .tng-frame container to create a responsive frame that maintains a consistent aspect ratio.

Ready to use

Develop

Styles

Wrap a frameable element in a .tng-frame container to create a responsive frame that maintains a consistent aspect ratio.

<div class="tng-frame">
  <img src="/demos/toyota-mania.webp" alt="Toyota Mania" />
</div>

Frameable content

The frame stretches its content to fill the box, but it handles two categories of content differently:

Replaced media — img and video is cropped to fill the frame using object-fit: cover, so the visible area always matches the aspect ratio regardless of the source’s intrinsic dimensions.
Embedded documents — iframe (maps, third-party embeds) reflows to fit the box rather than cropping, because there is no object-fit equivalent for embedded documents. Give the embedded content its own responsive layout.

The frame stretches its direct child to fill the cell, so a single wrapper element is sized too: wrapping the image in a <picture> to serve art-directed or format-specific <source> candidates is fully supported, and .tng-frame > picture > img behaves identically to a bare .tng-frame > img. A link wrapper (.tng-frame > a > img) works the same way.

<div class="tng-frame">
  <picture>
    <source srcset="/demos/toyota-mania.webp" type="image/webp" />
    <img src="/demos/toyota-mania.webp" alt="Toyota Mania" />
  </picture>
</div>

Keep the media at most one level deep. Only the frame’s direct child is stretched to fill the cell, so the media — or a single wrapper such as <picture> or a link — must be that direct child. Media nested inside additional wrappers will not be sized.

Aspect Ratio

1:1

<div class="tng-frame is-1-1">
  <div class="tng-slot"></div>
</div>

3:4

<div class="tng-frame is-3-4">
  <div class="tng-slot"></div>
</div>

4:3

<div class="tng-frame is-4-3">
  <div class="tng-slot"></div>
</div>

9:16

<div class="tng-frame is-9-16">
  <div class="tng-slot"></div>
</div>

16:9

<div class="tng-frame is-16-9">
  <div class="tng-slot"></div>
</div>

21:9

<div class="tng-frame is-21-9">
  <div class="tng-slot"></div>
</div>