Skip to content

Commit afeee04

Browse files
committed
Add img x-descriptor example
1 parent 7ed883e commit afeee04

7 files changed

Lines changed: 44 additions & 0 deletions
219 KB
Loading
774 KB
Loading
1.44 MB
Loading
153 KB
Loading
513 KB
Loading
990 KB
Loading
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Working with img’s srcset</title>
7+
<link rel="stylesheet" href="../../../styles/reset.css">
8+
<link rel="stylesheet" href="../../../styles/base.css">
9+
<style>
10+
h1,
11+
p {
12+
text-align: center;
13+
}
14+
15+
img {
16+
display: inline-block;
17+
width: 50%;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<header>
23+
<h1>Working with <code>img</code>’s <code>srcset</code></h1>
24+
</header>
25+
<main>
26+
<!--
27+
Loads 1x, 2x, or 3x versions of the same image, depending on whether the
28+
screen’s device-pixel-ratio (device to pixel ratio) is:
29+
1x (1:1)
30+
2x (2:1)
31+
3x (3:1)
32+
x:y — device pixel: css pixels
33+
-->
34+
<div><img
35+
src="img/OpenRescueAE_Goats_Spain_JMcArthur_2009-0546@1x.jpg" alt=""
36+
srcset="img/OpenRescueAE_Goats_Spain_JMcArthur_2009-0546@2x.jpg 2x,
37+
img/OpenRescueAE_Goats_Spain_JMcArthur_2009-0546@3x.jpg 3x"><img
38+
src="img/OpenRescueAE_Goats_Spain_JMcArthur_2009-0560@1x.jpg" alt=""
39+
srcset="img/OpenRescueAE_Goats_Spain_JMcArthur_2009-0560@2x.jpg 2x,
40+
img/OpenRescueAE_Goats_Spain_JMcArthur_2009-0560@3x.jpg 3x"></div>
41+
<p>Images courtesy of JoAnne McArthur / <a href="http://weanimals.org/" target="_blank" rel="noopener">We Animals</a></p>
42+
</main>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)