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

Frame

Frame

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

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

.l--frame {
  overflow: hidden;


  > :where(img, video, picture, iframe) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Props

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

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

Import

import { Frame } from '@lism-ui/core';

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'>
  <Media src='/img/img-1.jpg' objectPosition='50% 70%' alt='' width='960' height='640' />
  <Text tag='figcaption' pos='a' z='1' b='0' p='5' w='100%' c='white' ta='c' bgc='rgb(0 0 0 / 40%)'>Lorem ipsum text.</Text>
</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='16/9' pos='r' c='white'>
  <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>

数値以外での比率指定

ユーティリティクラスをカスタムで追加して利用する例を紹介します。

  • golden: 黄金比
  • silver: 白銀比
  • bronze: 青銅比
  • ogp: OG Imageの比率
  • cinema: シネマ比率
↓
arにそれぞれ指定

golden

silver

bronze

ogp

cinema 

.-ar\:golden {aspect-ratio: 16.18/10;}
.-ar\:silver {aspect-ratio: 14.14/10;}
.-ar\:bronze {aspect-ratio: 33.03/10;}
.-ar\:ogp {aspect-ratio: 1.91/1;}
.-ar\:cinema {aspect-ratio: 2.35/1;}

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

arはBoxなど他のコンポーネントでも指定できる汎用的なプロパティです。

↓
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 4/3 16/9
リサイズ可能 
<Frame ar={['1/1', '4/3', '16/9']} pos='r'>
  ...
</Frame>