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/a-1.jpg" alt="" width="960" height="640" /></Frame>figure, figcaptionの使用
↓
figure, 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>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/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>