Media

Under media, you can find some of the media-related styles.

In Spruce, we use a general responsive styling for all images. We also disable the user-select. Give images a radius globally with the img-border-radius key of the $media map (new in v3).

img {
    block-size: auto;
    display: block;
    max-inline-size: 100%;
    user-select: none;
}

New in v3. Videos are responsive too: they never overflow their container and keep their aspect ratio.

<video controls width="1280" height="720" poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
</video>

To create an image caption, use the figure and figcaption elements. The figure margin is reset, and the caption is centered below the image (no classes needed).

<figure class="figure">
    <img src="..." alt="..."/>
    <figcaption class="figure-caption">The beach where we were sunbathing last summer.</figcaption>
</figure>

New in v3. Configure the captions with the $media map:

@use 'sprucecss/scss/spruce' with (
  $media: (
    'figcaption-font-size': 0.875rem,
    'figcaption-font-style': italic,
    'figcaption-margin-block-start': 0.75rem,
    'figcaption-text-align': start,
    'img-border-radius': 0.5rem,
  ),
);

Iframes are block elements that fill their container. Wrap them in an element with an aspect-ratio to keep the proportions:

<div style="aspect-ratio: 16 / 9;">
    <iframe src="https://www.youtube-nocookie.com/embed/..." title="Video title" allowfullscreen></iframe>
</div>