forked from verlok/picturePolyfill
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
120 lines (105 loc) · 5.92 KB
/
index.html
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
118
119
120
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive images using verlok/picturePolyfill - by Andrea Verlicchi</title>
<meta name="viewport" content="width=device-width">
<style>
body {font-family: Helvetica, Arial, sans-serif; margin: 0 0 2em 0; padding: 0; text-align: center}
a {color: #0b97c4; text-decoration: none; border-bottom: 1px dotted #2b81af; padding-bottom: .1em}
a:visited {color: #2F6FAD}
a:hover {color: #cc0000; border-bottom: 1px solid #cc0000}
.element a, .element span, .element img {display: block}
h2 {margin-top: 1.5em}
img {width: 100%; height: auto; border: 0}
@media screen and (min-width: 481px) {
.element {float: left; width: 50%}
}
.cf:before, .cf:after { content: " "; display: table}
.cf:after { clear: both}
</style>
</head>
<body>
<div id="container">
<h1>Responsive images using <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> - Demo</h1>
<a href="https://twitter.com/picturePolyfill" class="twitter-follow-button" data-show-count="false"
data-size="large">Follow @picturePolyfill</a>
<p>The following are some <strong>responsive images</strong> created using a real <code><picture></code>
element, and the <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> script.</p>
<p>Real time server side scaling in this demo is provided by <a href="http://www.pixtulate.com">Pixtulate</a>.</p>
<h2>Full width server-side scaled image</h2>
<picture data-alt="A beautiful responsive image"
data-default-src="http://demo.api.pixtulate.com/demo/large-1.jpg?w=1440">
<source media="(min-width: 1441px)"
srcset="http://demo.api.pixtulate.com/demo/large-1.jpg?w=1920, http://demo.api.pixtulate.com/demo/large-1.jpg?w=3840 2x"/>
<source media="(min-width: 1025px)"
srcset="http://demo.api.pixtulate.com/demo/large-1.jpg?w=1440, http://demo.api.pixtulate.com/demo/large-1.jpg?w=2880 2x"/>
<source media="(min-width: 481px)"
srcset="http://demo.api.pixtulate.com/demo/large-1.jpg?w=1024, http://demo.api.pixtulate.com/demo/large-1.jpg?w=2048 2x"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-1.jpg?w=480, http://demo.api.pixtulate.com/demo/large-1.jpg?w=960 2x"/>
<img src="" alt="A beautiful responsive image"/>
</picture>
<h2>Half width server-side scaled images</h2>
<div class="cf">
<div class="element">
<h3>With HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image"
data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440">
<source media="(min-width: 1441px)"
srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1920 2x"/>
<source media="(min-width: 1025px)"
srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440 2x"/>
<source media="(min-width: 481px)"
srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1024 2x"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480, http://demo.api.pixtulate.com/demo/large-2.jpg?w=960 2x"/>
<img src="" alt="A beautiful responsive image"/>
</picture>
</div>
<div class="element">
<h3>Without HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image"
data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720">
<source media="(min-width: 1441px)" srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960"/>
<source media="(min-width: 1025px)" srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720"/>
<source media="(min-width: 481px)" srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480"/>
<img src="" alt="A beautiful responsive image"/>
</picture>
</div>
</div>
<h2>Half width pre-scaled images</h2>
<div class="cf">
<div class="element">
<h3>With HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="img/960x960.gif">
<source media="(min-width: 1441px)" srcset="img/960x960.gif, img/960x960x2.gif 2x"/>
<source media="(min-width: 1025px)" srcset="img/720x720.gif, img/720x720x2.gif 2x"/>
<source media="(min-width: 481px)" srcset="img/512x512.gif, img/512x512x2.gif 2x"/>
<source srcset="img/480x480.gif, img/480x480x2.gif 2x"/>
<img src="" srcset="" alt="A beautiful responsive image"/>
</picture>
</div>
<div class="element">
<h3>Without HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="img/960x960.gif">
<source media="(min-width: 1441px)" srcset="img/960x960.gif"/>
<source media="(min-width: 1025px)" srcset="img/720x720.gif"/>
<source media="(min-width: 481px)" srcset="img/512x512.gif"/>
<source srcset="img/480x480.gif"/>
<img src="" alt="A beautiful responsive image"/>
</picture>
</div>
</div>
<h2>Full width pre-scaled image, with HD (Retina) display support</h2>
<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">
<source media="(min-width: 1441px)" srcset="img/1920x1920.gif, img/1920x1920x2.gif 2x"/>
<source media="(min-width: 1025px)" srcset="img/1440x1440.gif, img/1440x1440x2.gif 2x"/>
<source media="(min-width: 481px)" srcset="img/1024x1024.gif, img/1024x1024x2.gif 2x"/>
<source srcset="img/480x480.gif, img/480x480x2.gif 2x"/>
<img src="" srcset="" alt="A beautiful responsive image"/>
</picture>
</div>
<script src="dist/picturePolyfill.min.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>