Koyaka
Patreon

Figure

16:9 Image

Preview Code
16:9 example 

    <div class="figure _16by9">
        <img src="https://picsum.photos/800/450" alt="16:9 example" />
    </div>

4:3 Video

Preview Code 

    <div class="figure _4by3">
        <video
            src="https://www.w3schools.com/html/mov_bbb.mp4"
            autoplay
            muted
            loop
        ></video>
    </div>

1:1 Iframe

Preview Code 

    <div class="figure _1by1">
        <iframe src="https://www.example.com" title="1:1 iframe"></iframe>
    </div>

21:9 Image

Preview Code
21:9 example 

    <div class="figure _21by9">
        <img src="https://picsum.photos/2100/900" alt="21:9 example" />
    </div>

3:2 Image

Preview Code
3:2 example 

    <div class="figure _3by2">
        <img src="https://picsum.photos/600/400" alt="3:2 example" />
    </div>

2:1 Image

Preview Code
2:1 example 

    <div class="figure _2by1">
        <img src="https://picsum.photos/1200/600" alt="2:1 example" />
    </div>

9:16 Image

Preview Code
9:16 example 

    <div class="figure _9by16">
        <img src="https://picsum.photos/450/800" alt="9:16 example" />
    </div>

Contents