Discover the solution to the responsive images challenge.
- [Instructor] Here's my solution to the challenge.…To save time, I've already set up the basic image elements…with appropriate alt attributes on lines 18 and 19…as well as here on lines 37 and 38.…Now I type the meta element to set the view port…(clicking)…to be the width of the entire device…and an initial scale of one for no zoom.…
I'll save that and load the page in the browser…to make sure that the defaults give a reasonable display…before I try expanding on the mark up.…First I put in the size for the arch.…The sizes is going to equal 90 view port width units…or 90 percent of the view port.…And the appropriate source set…for all the images with their widths,…the first one is images, archface1000.jpg…this is 1,000 units wide…images archface600.jpg which is 600 wide…and images archface300.jpg which is 300 wide.…
I'll save that, reload it in the browser.…It's now taking up 90 percent of the width…and when I resize…it's always taking up 90 percent of the width…of the view port.…Now let's work on the second picture.…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.