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" alt="Example of the srcset attribute. Image contains a coloured striped pattern with some inline text that indicates which of the candidate images were selected.">
  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>