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';Props
| Property | Description |
|---|---|
ar | Specifies the aspect ratio of the frame. |
(ar itself is a general-purpose CSS Prop that can be specified on any component.)
Usage
Specifying aspect ratio
ar='16/9'
<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
figure and figcaption<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
video<Frame ar="16/9"> <video controls> <source src="/video/video-1.mp4" type="video/mp4" /> </video></Frame>Using 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>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.
<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>ar can be used on any component
arar (the CSS Prop for aspect-ratio) is a general-purpose property that can be specified on any component.
See here for the available values.
ar on FlowLorem 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.
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. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
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. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint. Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
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.
<Flow ar="16/9" ov-y="auto" p="30"> ...</Flow>ar can also be changed at breakpoints.<Frame ar={['1/1', '3/2', '16/9']} pos="relative"> ...</Frame>