image-set-function/responsive-images.html at main · Timonwa/image-set-function · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive images with the image-set() CSS function</title>

    <style>
      * {
        box-sizing: border-box;
      }
      body {
        overflow-x: hidden;
        text-align: center;
      }
      figure {
        max-width: 1440px;
        margin-bottom: 40px;
      }
      img {
        display: block;
        width: 100%;
        height: auto;
      }
      .car {
        width: 100%;
        height: 500px;
        background-image: url("./img/2400by1592.jpg");
        background-image: -webkit-image-set(
          url("./img/640by425.jpg") 1x,
          url("./img/1200by796.jpg") 2x,
          url("./img/2400by1592.jpg") 3x
        );
        background-image: image-set(
          url("./img/640by425.jpg") 1x,
          url("./img/1200by796.jpg") 2x,
          url("./img/2400by1592.jpg") 3x
        );
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      @media screen and (max-width: 800px) {
        .car {
          margin: auto;
          width: 500px;
          height: 300px;
        }
      }
      @media screen and (max-width: 600px) {
        .car {
          margin: auto;
          width: 300px;
          height: 200px;
        }
      }
    </style>
  </head>

  <body>
    <h1>Responsive images with the image-set() CSS function</h1>
    <h2>Responsive Images</h2>

    <h3>Resoluton Switching</h3>
    <figure>
      <p class="car"></p>
      <figcaption>The browser automatically selects an image from the image set whose resolution is suitable for the resolution of the users screen.</figcaption>
      <p>
        Photo by
        <a
          href="https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
          >Markus Spiske</a
        >
        on
        <a
          href="https://unsplash.com/s/photos/bettle-car, Size 2.4mb?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
          >Unsplash</a
        >
      </p>
    </figure>

    <h3>Art Direction</h3>
    <figure>
      <picture>
        <source media="(max-width: 600px)" srcset="./img/portrait-view.jpg" />
        <source
          media="(max-width: 960px)"
          srcset="./img/landscape-view-mid.jpg"
        />
        <source media="(min-width: 961px)" srcset="./img/landscape-view.jpg" />
        <img
          src="./img/landscape-view.jpg"
          alt="landscape view of a woman standing in front of a multi-colored wall"
        />
      </picture>
      <figcaption
        >On large screens, the browser displays the normal image in a landscaped
        orientation. On mid screens, the image is cropped a little on the sides,
        while on small screens the image is cropped into a portrait
        orientation.</figcaption
      >
      <p>
        Photo by
        <a
          href="https://unsplash.com/@nixcreative?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
          >Tyler Nix</a
        >
        on
        <a
          href="https://unsplash.com/s/photos/people?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
          >Unsplash</a
        >
      </p>
    </figure>
  </body>
</html>