From the course: Responsive Images

Unlock the full course today

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

Using srcset and w

Using srcset and w - CSS Tutorial

From the course: Responsive Images

Start my 1-month free trial

Using srcset and w

- With the theory in place, let's look at the practical application and implications of using source set and the width attribute in a real project. If you want to follow along, go to the Exercise Files, grab the files for 03_04, and you'll get this in your browser. This is the same project we've worked with before. I've removed the responsive images code, so now we have a static image size. You can see that if you go anywhere, click Inspect Element, go to the Responsive Design mode, and then try to change the view port width here. You'll see the image stays the same, or rather you see you get no changes up here because the image isn't swapping out. Now it's time to add a source set attribute with a list of different images and their width descriptors so that we can actually get this image to become responsive. In brackets, I'll scroll down until I find my img element. It's right here, and we have the src attribute and the alt attribute already in place. Now I'm gonna add the third…

Contents