65 lines
1.8 KiB
HTML
65 lines
1.8 KiB
HTML
<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 displays with 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>]. Similarly,
|
|
there is a <a href="image-3x.png">3x image</a>, and a <a href="image-4x.png">4x image</a>.
|
|
</p>
|
|
|
|
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x" 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.">
|
|
|
|
<p>
|
|
The HTML for the above image is:
|
|
</p>
|
|
|
|
<pre>
|
|
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
|
|
image-3x.png 3x, image-4x.png 4x">
|
|
</pre>
|
|
</body>
|
|
</html>
|