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.

Advanced layouts with srcset and sizes

Advanced layouts with srcset and sizes - CSS Tutorial

From the course: Responsive Images

Start my 1-month free trial

Advanced layouts with srcset and sizes

- When we work with responsive images we have to make sure our HTML conforms with the break points that we've set in our CSS. This is where we're crossing that line from basic markup to presentational markup, and this is where a lot of the controversy is. To show you what I'm talking about, I've created a simple example. I've changed my page a little bit, so I've added some copies of the same image. You see i have four versions of the same image stacked below each other. I've wrapped them in a div, I've given them a class, and then I'm using some Flexbox CSS to create this layout. So when you get to a certain width, you get the images next to one another, two and two, and then when you get a little bit broader, they are split into three and three. But you see that even though we're now displaying the images quite small, we still get the queries that change the image sizes, and that's something that we have to fix. If you want to follow along with this demo, you can go get the exercise…

Contents