From the course: Creating Web Media

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Responsive images and the image element

Responsive images and the image element - CSS Tutorial

From the course: Creating Web Media

Start my 1-month free trial Buy for my team

Responsive images and the image element

“

- [Chris] Hi, this is Chris Converse. And in this episode we'll take a look at creating responsive images using the image element in HTML. Using the source set attribute, we'll direct the browser to use different images based on the users screen size and the size of our images. And in a future episode, we'll take this one step further by taking a look at the picture element. So, if you'd like to follow along with me, download the exercise files and let's begin by opening the HTML file in a text editor, and a web browser. Once you have the HTML file open in a browser, you'll see the lay out we're gonna be working with. We have an image here that's taking up the full width of the page and in the HTML file, if I scroll down here, you'll see that I've included the CSS in line. I've done this so that we can see the relationship between what's happening in the CSS and what we're gonna be setting up in the HTML and then if I continue to scroll down, once we get into the body area here we can…

Contents