+2013-08-05 Dean Jackson <dino@apple.com>
+
+ Upload example for a blog post.
+
+ * blog-files/srcset/image-1x.png: Added.
+ * blog-files/srcset/image-2x.png: Added.
+ * blog-files/srcset/image-src.png: Added.
+ * blog-files/srcset/index.html: Added.
+
2013-07-31 Benjamin Poulain <benjamin@webkit.org>
Upload images for a potential blog post
--- /dev/null
+<html>
+<head>
+ <title>Image srcset attribute example</title>
+ <style>
+ body {
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+ font-size: 120%;
+ line-height: 1.5;
+ margin: 2em 2em;
+ padding: 0;
+ background-color: #E2E6F5;
+ }
+
+ img {
+ width: 400px;
+ height: 400px;
+ }
+
+ pre {
+ padding: 1em 3em;
+ border: 1px solid #ccc;
+ background-color: #ddd;
+ }
+
+ p {
+ margin: 1em 0;
+ }
+
+ code {
+ font-size: 115%;
+ font-weight: bold;
+ color: #0F5426;
+ }
+ </style>
+</head>
+<body>
+
+<h1>
+ The <code>srcset</code> Attribute.
+</h1>
+
+<p>
+ Below is a image (<code>img</code>) element with both a regular <code>src</code> attribute
+ as well as a <code>srcset</code> attribute. There is a stylesheet that sets the dimensions
+ of images to 400x400px. On browsers without <code>srcset</code> support, the value of
+ the <code>src</code> attribute will be used as the image src [<a href="image-src.png">default image</a>].
+ On regular resolution displays, the 1x variant of the <code>srcset</code> will be used
+ [<a href="image-1x.png">1x image</a>]. On high resolution displays (at least 2 device pixels per CSS pixel),
+ the 2x variant of the <code>srcset</code> will be used [<a href="image-2x.png">2x image</a>].
+</p>
+
+<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x">
+
+<p>
+ The HTML for the above image is:
+</p>
+
+<pre>
+<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x">
+</pre>
+</body>
+</html>
git://git.webkit.org / WebKit-https.git / commitdiff
