Exercise $11-2$ Size a picture

for different viewports

In this exercise, you'll use the img element to display an image with different file sizes in different viewport sizes:

Teach your students usina tho hant...

curricula who've adopted our always peen instructors teaching job$-$oriented

in colle

students with university MIS programs that focus on providing

by technical practical, real$-$world experience

that employers

in consoyers are looking for

in Continuing Ed and Extension programs where the students are professionals who are expanding their skills

So if your program fits one of those profiles, please take a look at our books. I$\text{'}$m confident you'll discover a new level of structure, clarity, and relevance that will benefit both you and your students.

Use your text editor to open this file: htm$1\_$CSS$\_5\backslash$exercises$\backslash$ch$11\backslash$students$.$html

Display this page in your browser to see what it looks like.

Narrow the browser window to see that when the body of the page becomes less than its maximum width, the text will roll over to additional lines but the image will be cut off.

Add a srcset attribute to the img element so it provides for three images named students$\_750.$png$,$ students$\_550.$png$,$ and students$\_400.$png$.($The numbers on these names indicate the widths of the images.$)$ Then, change the src attribute so the default image is the one named students$\_550.$png$.$

Add a sizes attribute to the img element. If the minimum viewport width is $800$ pixels, the image with a width of $750$ pixels should be displayed. If the minimum viewport width is $600$ pixels, the image with a width of $550$ pixels should be displayed. And if neither of these conditions is met, the image with a width of $400$ pixels should be displayed.

Test the page in your browser to see that the image that's displayed depends on the width of the browser window.