Media
The a--media class is a general-purpose class that can be applied to media elements.
On its own, it only sets display:block.
A dedicated <Media> component is provided, which outputs an <img> tag by default.
Props
| Property | Description |
|---|---|
objectPosition | Specifies the object-position of the media element. |
objectFit | Specifies the object-fit of the media element. |
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepia | These are concatenated together and passed to style.filter. |
Import
import { Media } from 'lism-css/react'; ↓
Example
<Media src='https://cdn.lism-css.com/img/a-1.jpg' width='960' height='640' alt='Dummy Image' /> ↓
Specifying filter properties
<Frame as='figure' ar='2/1' pos='rel'> <Media contrast={1.1} saturate={0.2} src='https://cdn.lism-css.com/img/a-1.jpg' width='960' height='640' alt='Dummy Image' /> <Lism as='figcaption' pos='abs' z='1' b='0' p='5' w='100%' c='white' ta='center' lts='l'>Lorem ipsum text.</Lism></Frame> ↓
Using
objectPosition リサイズ可能
<Frame as='figure' ar='16/9'> <Media src='https://cdn.lism-css.com/img/a-1.jpg' objectPosition='50% 0%' alt='' width='960' height='640' /></Frame>Using Next.js <Image>
Next.js Image and similar components can be passed via the as property.
↓
Passing Next.js
Image via asimport { Media } from 'lism-css/react';import Image from 'next/image';
<Media as={Image} src="/img.jpg" alt="" width='960' height='640' alt='Dummy Image' />Using Astro <Image>
Astro’s <Image> cannot be passed directly via as.
An Astro (TypeScript?) check throws an “Image missing required ‘alt’ property.” error.
Therefore, in <Media> imported from lism-css/astro, passing the string 'AstroImage' to as will internally invoke <Image>.
↓
Example of using Astro’s
<Image>import { Media } from 'lism-css/astro';
<Media as='AstroImage' src="/img.jpg" alt="Dummy Image" width='960' height='640' />