html · level 3 · unit 1 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
w and sizes let the browser fit the file to the space.
A picture might fill a whole phone screen but only half a laptop screen. Instead of 1x and 2x, give each file in srcset its real width with a w: 400w means the file is 400 pixels wide.
Then sizes says how wide the picture will appear. Each entry starts with a , a question about the screen like (min-width: 800px). The unit is one hundredth of the viewport's width, so 50vw is half.
The browser checks the entries in order and uses the first one that is true. It works out the width it needs and downloads one file. The last entry has no condition: it is the answer when nothing else matches.
<h1>Adopt a pet</h1>
<img src="cat.svg"
srcset="cat.svg 400w, dog.svg 800w"
sizes="(min-width: 800px) 50vw, 100vw"
alt="A pet looking for a new home" width="800" height="600">Press show my page to see it here.
The browser counts pixel density too, so a sharp phone may still choose the bigger file.
guess first
On a screen 1200 pixels wide, how wide will this picture appear?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<img src="cat.svg"
srcset="cat.svg 400w, dog.svg 800w"
sizes="(min-width: 1000px) 33vw, 100vw"
alt="A pet looking for a new home" width="800" height="600">your turn
Your turn. Describe the space.
On screens at least 700 pixels wide, this photo fills half the viewport. Otherwise it fills all of it. Fill the two blanks in sizes on line 4.
Press show my page to see it here.
- half on wide screens, all on narrownot checked yet
- both widths are still listednot checked yet
fix it
Wide screens never use half the width. Can you fix it?
Press show my page to see it here.
- the condition comes before the plain entrynot checked yet
- the list of files has not changednot checked yet
- The browser reads
sizesfrom the left and stops at the first entry that is true. Which entry is that? - An entry with no media condition is always true, so it must come last.
- Swap the two entries on line 4:
(min-width: 800px) 50vwfirst, then100vw.
nailed it
your pictures fit every screen. :D
400wtells the browser a file is 400 pixels wide.sizessays how wide the picture will appear.- The entry with no condition always goes last.
new words in your collection
- media condition
- vw
This lesson isn’t saved. A free account remembers every lesson you finish.