Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (54 sloc) 3.39 KB
<!DOCTYPE html>
<!--
Copyright 2017 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
<meta name="author" content="//samdutton.com">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
<meta itemprop="image" content="/images/icons/icon192.png">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#fff">
<base target="_blank">
<title>img with srcset using w values</title>
<link rel="stylesheet" href="../css/main.css" />
<style>
img {
width: 50vw;
}
</style>
</head>
<body>
<div id="container">
<h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&gt; with srcset using w&nbsp;values</h1>
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="Lias and Little Puss: two ten week old grey tabby kittens" />
<p>Try changing the viewport size.</p>
<p>A browser that supports the srcset attribute will choose <a href="small.jpg" title="500px wide image file">small.jpg</a>, <a href="medium.jpg" title="1000px wide image file">medium.jpg</a> or <a href="large.jpg" title="1500px wide image file">large.jpg</a>, depending on the viewport width and the screen resolution.</p>
<p>
Image used: <span id="imgSrc"></span><br>
Image natural width: <span id="imgNaturalWidth"></span>px<br>
Image display width: <span id="imgWidth"></span>px<br>
Device pixel ratio: <span id="devicePixelRatio"></span><br>
Minimum acceptable image width: <span id="minimumWidth"></span>px<br>
Viewport width: <span id="viewportWidth"></span>px<br>
Available screen width: <span id="availableWidth"></span>px<br>
</p>
<p class="borderBelow">In this example, only the <strong>viewport</strong> width is taken into account by the browser when choosing which image file to request. The <a href="../sizeswvalues" title="img element with srcset and sizes attributes">sizes example</a> enables the browser to choose the appropriate file given the <strong>display</strong> width of the image.</p>
<p>The <a href="../pictureart" title="Using the picture element for art direction">art direction</a> and <a href="../picturetype" title="Using the picture element with alternative sources">file types</a> examples show ways to use the picture element.</p>
<a href="https://github.com/samdutton/simpl/blob/gh-pages/srcsetwvalues" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</div>
<script src="js/main.js"></script>
<script src="../js/lib/ga.js"></script>
</body>
</html>