From the course: HTML: Images and Figures

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Solution: Use srcset

Solution: Use srcset - HTML Tutorial

From the course: HTML: Images and Figures

Start my 1-month free trial

Solution: Use srcset

“

- [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…

Contents