Images and media

Media scales within its container. Image attributes control cropping; meaningful alternative text remains your responsibility.

Usage

Markup: img, video, figure

Behaviour: Intrinsic media dimensions and playback are browser/application-owned.

Component API and styling module · Inherited appearance settings

Figures and responsive images

Supply intrinsic width and height to reserve space. Use a caption for visible context.

Illustrated hills beneath a pale sky — A responsive image with a caption.

<figure>
  <img src="/RevaCSS/images/example-landscape.svg" width="640" height="360" alt="Illustrated hills beneath a pale sky">
  <figcaption>A responsive image with a caption.</figcaption>
</figure>

Image ratios

data-ratio constrains the image. cover crops it; contain keeps the full image within the chosen ratio.

The entire hills illustration inside a square

<div class="grid cols-2">
  <img src="/RevaCSS/images/example-landscape.svg" width="640" height="360" data-ratio="square" data-fit="cover" alt="Hills, cropped to a square">
  <img src="/RevaCSS/images/example-landscape.svg" width="640" height="360" data-ratio="square" data-fit="contain" alt="The entire hills illustration inside a square">
</div>