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';import { Frame } from 'lism-css/astro';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><div class="l--frame -ar:16/9"> <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" /></div>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><figure class="l--frame -ar:16/9 -pos:relative"> <img src="https://cdn.lism-css.com/img/a-1.jpg" width="960" height="640" /> <figcaption class="l--flex -pos:absolute -z:1 -b:0 -w:100% -jc:center -p:10 -c -bgc" style="--c: var(--white); --bgc: rgb(0 0 0 / 40%)"> Lorem ipsum text. </figcaption></figure>videoの使用
↓
videoの使用 リサイズ
<Frame ar="16/9"> <video controls> <source src="/video/video-1.mp4" type="video/mp4" /> </video></Frame><div class="l--frame -ar:16/9"> <video controls> <source src="/video/video-1.mp4" type="video/mp4" /> </video></div>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><div class="l--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></div>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><div class="l--frame -ar:3/2 -pos:relative -c" style="--c:#fff"> <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640"> <div class="is--layer -bgc" style="--bgc:rgb(0 0 0 / 40%);backdrop-filter:blur(4px)"></div> <div class="is--layer -p:30 -ov:auto"> <div class="l--center -min-h:100% -g:15"> <h2>Heading</h2> <p class="-max-w:xs" style="--max-w:var(--sz--xs)">Lorem ipsum dolor sit amet...</p> </div> </div></div>