Media

To implement clean images, videos and audio.

@use '@natachah/vanilla-frontend/scss/base/media'

Image

The image is using the native <img> tag with the attributes srcset, alt and title.

html

<img src="https://picsum.photos/400/330" srcset="https://picsum.photos/800/660 2x" alt="A random image from lorem picsum" title="This is my picture">

css properties

--image-width
--image-height
--image-fit
--image-position
--image-ratio

Picture

For responsive and best practice, it's better to use the <picture> tag with inside the <source> and <img> tags.

<picture>
    <source media="(max-width:576px)" srcset="https://picsum.photos/id/237/200, https://picsum.photos/id/237/400 2x">
    <source media="(max-width:768px)" srcset="https://picsum.photos/id/237/400, https://picsum.photos/id/237/800 2x">
    <source media="(max-width:992px)" srcset="https://picsum.photos/id/237/800, https://picsum.photos/id/237/1600 2x">
    <img src="https://picsum.photos/id/237/200" srcset="https://https://picsum.photos/id/237/400 2x" alt="A random image from lorem picsum" title="This is my picture">
</picture>

Figure

You also can use <figure> and <figcaption> tags, to display an <img> with a nice caption.

TIP

You can also combine <figure> with a <picture> tag.

html

<figure>
    <img src="https://picsum.photos/id/320/400/330" srcset="https://picsum.photos/id/320/800/660 2x" alt="My random image from lorem picsum">
    <figcaption>My image from lorem picsum</figcaption>
</figure>

css properties

--caption-color
--caption-font-size
--caption-margin-block
--caption-margin-inline

Video

Use the default <video> and <source> tags.

By default the video take 100% width and have a ratio of 16:9.

html

<video width="320" height="240" controls>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

css properties

--video-width
--video-height
--video-fit
--video-position
--video-ratio

Audio

Use the default <audio> and <source> tags.

By default the audio take 100% width.

html

<audio controls>
    <source src="http://localhost:5173/public/audio.mp3" type="audio/mpeg">
</audio>

css properties

--audio-width