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
Specifying aspect ratio
↓
Specifying
ar='16/9'
Resize
<Frame ar="16/9"> <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" /></Frame>Using figure and figcaption
↓
Using
figure and figcaption Resize
<Frame as="figure" ar="16/9" pos="relative"> <img src="https://cdn.lism-css.com/img/a-1.jpg" 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/a-1.jpg" 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>