Media

a--mediaクラスは、メディアに対して付与できる汎用クラスです。それ単体でのスタイルはdisplay:blockのみです。特に持ちませんが、l--flow, l--frameの子要素ではimg, videoと同じ処理が適用されます。

専用コンポーネント<Media>を用意しており、デフォルトで<img>タグが出力されます。

Props

プロパティ	説明
`objectPosition`	メディア要素の`object-position`を指定できます。
`objectFit`	メディア要素の`object-fit`を指定できます。
`blur`,`contrast`,`brightness`,`grayscale`,`hueRotate`,`invert`,`saturate`,`sepia`	これらをまとめて連結し、 `style.filter` に受け渡します。

Import

import { Media } from 'lism-css/react';

↓

例

<Media src='https://cdn.lism-css.com/img/a-1.jpg' width='960' height='640' alt='Dummy Image' />

↓

filter系のプロパティの指定

<Frame tag='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 tag='figcaption' pos='abs' z='1' b='0' p='5' w='100%' c='white' ta='center' lts='l'>Lorem ipsum text.</Lism>
</Frame>

↓

objectPositionの使用

リサイズ可能

<Frame tag='figure' ar='16/9'>
  <Media src='https://cdn.lism-css.com/img/a-1.jpg' objectPosition='50% 0%' alt='' width='960' height='640' />
</Frame>

Next.js の`<Image>`を使う方法

Next.jsのImageなどは、asプロパティに渡すことができます。

↓

asを活用してでNext.jsのImageを渡す

import { Media } from 'lism-css/react';
import Image from 'next/image';

<Media as={Image} src="/img.jpg" alt="" width='960' height='640' alt='Dummy Image' />

Astro の`<Image>`を使う方法

Astroの<Image>は、asに渡すことができません。
Astro(TypeScript?)のチェックに引っかかり、「Image missing required “alt” property.」エラーが出てしまいます。

そのため、lism-css/astroから読み込んだ<Media>では、以下のようにasに'AstroImage'という文字列を指定することで内部で<Image>が呼び出されるようにしています。

↓

Astroの<Image>を使用する例

import { Media } from 'lism-css/astro';
import Image from 'next/image';

<Media as='AstroImage' src="/img.jpg" alt="" width='960' height='640' alt='Dummy Image' />

Media

Props

Import

Next.js の<Image>を使う方法

Astro の<Image>を使う方法

Next.js の`<Image>`を使う方法

Astro の`<Image>`を使う方法