# Aspect ratio

A frame that holds one shape, whatever is put in it. Say the shape (16:9, 4:3, 1:1, 3:2, 21:9, 3:4) and the frame takes its height from its width; a picture, a video or a map inside it is cropped to fit, keeping the middle unless you say which part to keep. Until a picture arrives the frame is a recess, so the page does not jump. An optional hairline round the edge keeps a pale picture from dissolving into a pale page. Plain CSS, with no script.

Kit part · With the Kit · https://tactileui.dev/parts/aspect-ratio

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

There is no script, no wrapper element and no padding trick, and the pictures on this page are small drawings held in the page itself.

## Variants

- 16:9
- 4:3
- 1:1
- 3:2
- 21:9
- 3:4
- Part to keep
- Nothing cut off
- With a caption
- In a card · the corner is the card’s less its padding
- A row of three · they stay a row
- Before the picture arrives · the recess shows
- Anything else · a block set in the frame

## States

- Cover
- Cover · part kept
- Contain
- Hairline edge
- No picture yet

## Props and options

| Name | Kind | Description |
| - | - | - |
| img · video · iframe · svg · canvas | element | What fills the frame. Pictures and video are cropped with object-fit. |

## Usage notes

Choose a shape: the frame keeps it and the picture is cropped to fit. Move Position to keep a different part of the picture, and choose Contain to see all of it. The picture is the same one each time; only the frame changes.

## Accessibility

- The frame says nothing.
- A frame that is waiting for a picture shows the recess and keeps its place, so the page does not move when the picture arrives.
- Cropping loses what is outside the frame.
- The hairline is drawn over the picture and is ignored by pointers, so it never gets in the way of a link or a video’s controls. It is the kit’s rule colour, which is set to show in every finish.
- A frame never sets its own size in pixels, only its shape, so it follows its column. Nothing moves, so there is nothing to change for reduced motion.

## Related parts

- [Avatar](https://tactileui.dev/parts/avatar): A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.
- [Carousel](https://tactileui.dev/parts/carousel): Slides seen one at a time through a viewer’s gate: transport keys either side of a frame counter on an LCD, lamp keys to jump, swipe on touch. Nothing moves on its own unless you ask it to.
- [Film strip](https://tactileui.dev/parts/film-strip): A carousel as a strip of film in a machined viewer. The frames run behind a gate lit from behind, with sprocket holes along both edges, and the frames either side wait under a smoked cover. It moves a frame at a time and settles as each one registers. Turn the thumbwheel, press the keys or swipe the film itself: underneath it is a native scroller with a snap point at every frame.
- [Lightbox](https://tactileui.dev/parts/lightbox): A grid of thumbnails that opens one picture large. Each thumbnail is a plate with the picture set in it, and a real link to the full picture, so the grid works without any script. Press one and the page goes behind a near-black scrim. Left and Right turn the page, Home and End go to the first and the last, Escape puts it away, and on a touch screen a swipe does the same. It is dark in every finish, because a picture is looked at best in a dark room.