Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

In this lab, you will add responsive images to the Egypt vacation webpage as shown below. Webpage shows Egypt page from a mobile device with

In this lab, you will add responsive images to the Egypt vacation webpage as shown below.
Webpage shows Egypt page from a mobile device with three images showing various places around Egypt.
Step 1: Show images for different DPRs (2 points)
Modify the first in egypt.html to use the srcset attribute. Show egypt_600.jpg on a 1 DPR screen, egypt_1200.jpg on a 2 DPR screen, and egypt_1800.jpg on a 3 DPR screen. Note that all images in this lab are in the images folder, so each image filename must be prefaced with "images/". Ex: images/egypt_600.jpg.
The Chrome DevTools' Network tab can be used to verify that the appropriate image is requested depending on the DPR. Ex: The screenshot below shows egypt_1200.jpg is requested when the DPR is 2.0.
Chrome DevTools screenshot.
Step 2: Change image sizes for different viewport widths (3 points)
Modify the second in egypt.html to use the srcset and sizes attributes.
The srcset attribute should indicate the image names and associated sizes:
luxor_600.jpg is 600 pixels wide
luxor_800.jpg is 800 pixels wide
luxor_1200.jpg is 1200 pixels wide
The sizes attribute should describe the image size requirements for various viewport widths:
When the viewport width is at least 700px wide, the image width should be 600px.
When the viewport width is at least 500px wide, the image width should be 400px.
The default image width should be 200px.
Don't forget the preface "images/" before image filenames. Resizing the browser width should cause the three different images to display at the 500 and 700 breakpoints.
Step 3: Add art direction for different viewport widths (3 points)
Add tags around the third in egypt.html. Then add the appropriate tag inside so hotel_wide.jpg displays instead of hotel_narrow.jpg when the viewport width is at least 500px wide.
Resizing the browser should display hotel_narrow.jpg when the viewport width is <500px wide and hotel_wide.jpg otherwise.
Step 4: Show SVG image for list background (2 points)
Modify styles.css so check.svg is displayed centered in the background of the unordered list. Set the following CSS properties:
background-image should display images/check.svg
background-repeat should be no-repeat
background-position should be center
background-size should be 60vw
Resizing the browser width should cause the check.svg image to grow and shrink.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Professional Microsoft SQL Server 2012 Administration

Authors: Adam Jorgensen, Steven Wort

1st Edition

1118106881, 9781118106884

More Books

Students also viewed these Databases questions