Lism CSS
Docs
検索

Media

<Media>は、画像や動画などのメディア要素を出力するLismコンポーネントです。
Astro版ではデフォルトで Astro の<Image>が使用されます。React版ではデフォルトで<img>タグが出力されます。

Import

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

例

Dummy Image 
<Media src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" width="960" height="640" alt="Dummy Image" />
↓
filterをstyleで指定する例
Dummy Image
Lorem ipsum text.
<Frame as="figure" ar="2/1" pos="relative">
  <Media style={{ filter: 'contrast(1.1) saturate(0.2)' }} src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" width="960" height="640" alt="Dummy Image" />
  <Lism as="figcaption" pos="absolute" z="1" b="0" p="5" w="100%" c="white" ta="center" lts="l">
    Lorem ipsum text.
  </Lism>
</Frame>
↓
objectPositionをstyleで指定する例
リサイズ 
<Frame as="figure" ar="16/9">
  <Media src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" style={{ 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="Dummy Image" width="960" height="640" />

Astro版での<Image> / <Picture>の使い方

lism-css/astroの<Media>では、asの値に応じて Astro のコンポーネントに自動マッピングされます。

as 出力
省略 / "img" Astro <Image />
"picture" Astro <Picture />
"video" / "iframe" 等 そのままHTMLタグ

<Media>は内部で Astro の<Image />や<Picture />を使用しているため、それらのすべての Props が使用できます。

詳細なリファレンスは Astro 公式ドキュメントをご覧ください： <Image /> / <Picture />

↓
qualityとformatを使用する例（Astro <Image>）
Dummy Image 
import myImage from '@/img/img-1.jpg';


<Media src={myImage} alt="Dummy Image" quality="high" format="webp" />

リモート画像で使用する例

↓
リモート画像で使用する例
Dummy Image 
<Media src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" inferSize alt="Dummy Image" quality="high" format="webp" />
↓
Astro <Picture>でformatsを使用する例
Dummy Image 
<Media as="picture" src="https://cdn.lism-css.com/img/2SvHdIk1KOOR.webp" width="960" height="640" alt="Dummy Image" formats={['avif', 'webp']} />

外部サイトの画像をAstroの<Image>や<Picture>で利用してinferSizeなどのプロパティを使用する場合、astro.config.tsでimage.domains（またはimage.remotePatterns）を設定する必要があります。

© 2026 Lism CSS.