コンテンツにスキップ
Lism CSS

Frame

アスペクト比や高さを指定した時、コンテンツがその高さを超えないように制限します。

直下のメディア要素（img,vieo,picture,iframe）が object-fit:cover でサイズいっぱいに表示されるようにもなっています。

CSS

Section titled “CSS”

Props

Section titled “Props”
プロパティ説明
arフレームの比率を指定できます。
layout展開したい Lismコンポーネント を指定できます。

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

Import

Section titled “Import”
import { Frame } from 'lism-css';

Usage

Section titled “Usage”
↓
ar='16/9'を指定
リサイズ可能 
<Frame ar='16/9'>
  <img src='/img/img-1.jpg' alt='' width='960' height='640' />
</Frame>
↓
figure, figcaptionの使用
Lorem ipsum text.
リサイズ可能 
<Frame tag='figure' ar='16/9' pos='r'>
  <Media src='/img/img-1.jpg' objectPosition='50% 70%' alt='' width='960' height='640' />
  <Lism tag='figcaption' pos='a' z='1' b='0' w='100%' d='f' jc='c' c='white' bgc='rgb(0 0 0 / 40%)'>Lorem ipsum text.</Lism>
</Frame>
↓
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>
↓
Layer系を活用する

Heading

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能 
<Frame ar='gold' pos='r' c='#fff'>
  <img src='/img/img-1.jpg' alt='' width='960' height='640' />
  <Layer blur='4px' bgc='rgb(0 0 0 / 40%)' />
  <Layer p='40' ov='auto'>
    <Center minH='100%' g='10'>
      <Text fz='2xl' lh='xs' fw='bold'>Heading</Text>
      <p>...</p>
    </Center>
  </Layer>
</Frame>

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

Section titled “ar はどのコンポーネントにも指定できます”
arで指定できる値について

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

↓
Boxにarを指定する例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能 
<Box ar='16/9' ovy='auto' isFlow p='40'>
  ...
</Box>
↓
arはブレイクポイントで変更することも可能です。
比率: 1/1 3/2 16/9
リサイズ可能 
<Frame ar={['1/1', '3/2', '16/9']} pos='r'>
  ...
</Frame>