html5/picture.html at main · naradesign/html5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Picture element example</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-content: center;
        }
        @media (min-width:641px) {
            body { flex-flow: wrap; }
        }
        @media (max-width:640px) {
            body { flex-flow: column; }
        }
        figure {
            position: relative;
            margin: 0;
            flex: 50%;
        }
        figcaption {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            font-weight: bold;
            text-shadow: -1px -1px 0 #fff, 1px 1px 0 #fff;
        }
        picture,
        img {
            display: block;
            max-width: 100%;
        }
    </style>
</head>
<body>
    <figure>
        <figcaption>jpg<sup>(201KB)</sup> &lt;img&gt; element</figcaption>
        <img src="img/example.jpg">
    </figure>
    <figure>
        <figcaption>webp<sup>(93KB)</sup> &lt;img&gt; element</figcaption>
        <img src="img/example.webp">
    </figure>
    <figure>
        <figcaption>avif<sup>(45KB)</sup> &lt;img&gt; element</figcaption>
        <img src="img/example.avif">
    </figure>
    <figure>
        <figcaption>&lt;picture&gt; element [avif|webp|jpg]</figcaption>
        <picture>
            <source srcset="img/example.avif" type="image/avif">
            <source srcset="img/example.webp" type="image/webp">
            <img src="img/example.jpg" alt>
        </picture>
    </figure>
</body>
</html>