a08e8af896148979d6ca0260ed89c80020e74be7
[WebKit-https.git] / Websites / webkit.org / demos / srcset / index.html
1 <html>
2 <head>
3   <title>Image srcset attribute example</title>
4   <style>
5   body {
6       font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
7       font-size: 120%;
8       line-height: 1.5;
9       margin: 2em 2em;
10       padding: 0;
11       background-color: #E2E6F5;
12   }
13
14   img {
15       width: 400px;
16       height: 400px;
17   }
18
19   pre {
20       padding: 1em 3em;
21       border: 1px solid #ccc;
22       background-color: #ddd;
23   }
24
25   p {
26       margin: 1em 0;
27   }
28
29   code {
30       font-size: 115%;
31       font-weight: bold;
32       color: #0F5426;
33   }
34   </style>
35 </head>
36 <body>
37
38 <h1>
39     The <code>srcset</code> Attribute.
40 </h1>
41
42 <p>
43     Below is a image (<code>img</code>) element with both a regular <code>src</code> attribute
44     as well as a <code>srcset</code> attribute. There is a stylesheet that sets the dimensions
45     of images to 400x400px. On browsers without <code>srcset</code> support, the value of
46     the <code>src</code> attribute will be used as the image src [<a href="image-src.png">default image</a>].
47     On regular resolution displays, the 1x variant of the <code>srcset</code> will be used
48     [<a href="image-1x.png">1x image</a>]. On high resolution displays (at least 2 device pixels per CSS pixel),
49     the 2x variant of the <code>srcset</code> will be used [<a href="image-2x.png">2x image</a>].
50 </p>
51
52 <img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x">
53
54 <p>
55     The HTML for the above image is:
56 </p>
57
58 <pre>
59 &lt;img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x"&gt;
60 </pre>
61 </body>
62 </html>