| MTM6201

Picture This! Participation

Objective

Use what you have learned about the <picture> tag, srcset and sizes attributes, and responsive images to complete the blog post header.

Requirements

The following requirements must be met in order to complete the assignment successfully:

  1. Download the Picture This!open in new window starter files. Inside the zip folder is an index.html file, a style.css folder, and a images folder containing one image.
  2. Using the image tables below, determine which image sizes will be necessary. There will be two image ratios: landscape and square.
  3. Use a photo editing program, like Photoshop, or resizing service, like derivvopen in new window, to create multiple sized images of the provided image.
  4. Add the appropriate HTML / CSS, so that if the viewport is smaller than 960px, the image will be displayed in landscape and at an adequate resolution.
  5. Add the appropriate HTML / CSS, so that if the viewport is 960px or larger, the image displayed is a square and at an adequate resolution.

Image Table

Landscape Image

viewport1x2x3x
320px320px640px960px
480px480px960px1440px
720px720px1440px2160px
960px960px1920px2880px

Square Image

viewport1x2x3x
960px480px960px1440px
1280px640px1280px1920px
1600px800px1600px2400px

Square image is view at half the viewport

Examples

Screenshot of Picture This at less than 960pxLess than 960px

Screenshot of Picture This at more than 960px960px or more

Submission

This project and all of it assets should be published to your GitHub paging site. The URL to the live version of the project should be submit to the Picture This assignment on BrightSpace.