Lism CSS
Docs
Search

Frame (l--frame)

l--frame is a class that fits the direct child media element (img, video, iframe) to its own size.

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 Component

Import

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

Usage

Aspect ratio

↓
Specifying ar='16/9'
Resize 
<Frame ar="16/9">
  <img src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" width="960" height="640" />
</Frame>

Using figure and figcaption

↓
Using figure and figcaption
Lorem ipsum text.
Resize 
<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>

Using video

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

Using iframe

↓
Using iframe
Resize 
<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>

Using Layer components

↓
Using Layer components

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.

Resize 
<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.