For example:
Code: Select all
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Srcset Sizes Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<figure>
<picture>
<source srcset="image-344px.webp 344w, image-560px.webp 560w, image-824px.webp 824w, image-918px.webp 918w, image-1084px.webp 1084w, image-1254px.webp 1254w" type="image/webp" sizes="(max-width: 727px) 87vw, ((min-width: 727px) and (max-width: 1131px)) calc((87vw - 4.5em) / 2), (min-width: 1131px) calc((87vw - 9em) / 3)">
<source srcset="image-344px.jpg 344w, image-560px.jpg 560w, image-824px.jpg 824w, image-918px.jpg 918w, image-1084px.jpg 1084w, image-1254px.jpg 1254w" type="image/jpeg" sizes="(max-width: 727px) 87vw, ((min-width: 727px) and (max-width: 1131px)) calc((87vw - 4.5em) / 2), (min-width: 1131px) calc((87vw - 9em) / 3)">
<img src="image-1254px.jpg" alt="Navigate to Gallery" width="1254" height="1254">
</picture>
</figure>
</body>
</html>
The MDN article then shows example code with a typical media query in the sizes attribute:Each condition is specified using the same conditional format used by media queries.
Code: Select all
<img
src="new-york-skyline-wide.jpg"
srcset="
new-york-skyline-wide.jpg 3724w,
new-york-skyline-4by3.jpg 1961w,
new-york-skyline-tall.jpg 1060w
"
sizes="((min-width: 50em) and (max-width: 60em)) 50em,
((min-width: 30em) and (max-width: 50em)) 30em,
(max-width: 30em) 20em"
alt="The New York City skyline on a beautiful day, with the One World Trade Center building in the middle." />
The Nu HTML Checker accepts both the MDN html and my html as valid regarding the sizes attribute.
Please advise...and many thanks for your wonderful work with the validator!