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';import { Frame } from 'lism-css/astro';Usage
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><div class="l--frame -ar:16/9"> <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" /></div>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><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>Using video
↓
Using
video Resize
<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>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><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>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><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>