Frame

l--frame は、直下のメディア要素（img,video,iframe）を自身のサイズに合わせて表示するレイアウトモジュールです。

↓

CSS

対応コンポーネント

lism-css では<Frame>コンポーネントを配布しています。

Import

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

Props

プロパティ	説明
`ar`	フレームの比率を指定できます。

(ar 自体はどのコンポーネントにも指定できる CSS Props です。)

Usage

↓

ar='16/9'を指定

リサイズ可能

<Frame ar='16/9'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
</Frame>

↓

figure, figcaptionの使用

リサイズ可能

<Frame tag='figure' ar='16/9' pos='rel'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  <Flex tag='figcaption' pos='abs' z='1' b='0' w='100%' jc='center' p='10' c='white' bgc='rgb(0 0 0 / 40%)'>Lorem ipsum text.</Flex>
</Frame>

<figure class="l--frame -ar:16/9 -pos:rel">
  <img src="https://cdn.lism-css.com/img/a-1.jpg" width="960" height="640">
  <figcaption class="-pos:abs -z:1 -b:0 -w:100% -d:f -jc:center -p:10 -c -bgc" style="--c:var(--white);--bgc:rgb(0 0 0 / 40%)"> Lorem ipsum text. </figcaption>
</figure>

↓

videoの使用

リサイズ可能

<Frame ar='16/9'>
  <video controls>
    <source src="/video/video-1.mp4" type="video/mp4" />
  </video>
</Frame>

↓

iframeの使用

リサイズ可能

<Frame ar='16/9'>
  <iframe src="https://www.youtube.com/embed/gcgKUcJKxIs?si=uDa6akiLY3QmM8pK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</Frame>

<div class="l--frame -ar:16/9">
  <iframe src="https://www.youtube.com/embed/gcgKUcJKxIs?si=uDa6akiLY3QmM8pK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

↓

Layer系を活用する

Heading

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

リサイズ可能

<Frame ar='3/2' pos='rel' c='#fff'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  <Layer blur='4px' bgc='rgb(0 0 0 / 40%)' />
  <Layer p='30' ov='auto'>
    <Center min-h='100%' g='15'>
      <h2>Heading</h2>
      <Dummy max-w="xs" />
    </Center>
  </Layer>
</Frame>

<div class="l--frame -ar:3/2 -pos:rel -c" style="--c:#fff">
  <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640">
  <div class="is--layer -bgc" style="--bgc:rgb(0 0 0 / 40%);backdrop-filter:blur(4px)"></div>
  <div class="is--layer -p:30 -ov:auto">
    <div class="l--center -min-h:100% -g:10">
      <p class="-fz:2xl -lh:xs -fw:bold">  Heading  </p>
      <p class="-max-w:xs" style="--max-w:var(--sz--xs)">Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.  </p>
    </div>
  </div>
</div>

ar はどのコンポーネントにも指定できます

arで指定できる値について

ar(aspect-ratioのCSS Props)は他のコンポーネントでも指定できる汎用的なプロパティです。
使用できる値についてはこちらをご覧ください。

↓

Flowにarを指定する例

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

リサイズ可能

<Flow ar='16/9' ov-y='auto' p='30'>
  ...
</Flow>

↓

arはブレイクポイントで変更することも可能です。

比率: 1/1 3/2 16/9

リサイズ可能

<Frame ar={['1/1', '3/2', '16/9']} pos='rel'>
  ...
</Frame>