Lism CSS
Docs
検索

Frame (l--frame)

l--frame は、直下のメディア要素（img,video,iframe）を 自身のサイズにフィットさせて表示するクラスです。

CSS

.l--frame {
  overflow: hidden; // Memo: clip だと stack の直下で aspect-ratio が効かない。

  // 直下のメディアを frame いっぱいに広げる。
  > :where(img, video, iframe) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Lismコンポーネント

Import

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

Usage

アスペクト比の指定

↓
ar='16/9'を指定
リサイズ 
<Frame ar="16/9">
  <img src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" width="960" height="640" />
</Frame>

figure, figcaptionの使用

↓
figure, figcaptionの使用
Lorem ipsum text.
リサイズ 
<Frame as="figure" ar="16/9" pos="relative">
  <img src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" width="960" height="640" />
  <Flex as="figcaption" pos="absolute" z="1" b="0" w="100%" jc="center" p="10" c="white" bgc="rgb(0 0 0 / 40%)">
    Lorem ipsum text.
  </Flex>
</Frame>

videoの使用

↓
videoの使用
リサイズ 
<Frame ar="16/9">
  <video controls>
    <source src="/video/video-1.mp4" type="video/mp4" />
  </video>
</Frame>

iframeの使用

↓
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系を活用する

↓
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="relative" c="#fff">
  <img src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" width="960" height="640" />
  <Layer style={{ backdropFilter: 'blur(4px)' }} bgc="rgb(0 0 0 / 40%)" />
  <Layer p="30" ov="auto">
    <Center min-h="100%" g="15">
      <h2>Heading</h2>
      <Text max-w="xs">
        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.
      </Text>
    </Center>
  </Layer>
</Frame>

© 2026 Lism CSS.