From the course: HTML Essential Training
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Responsive width - HTML Tutorial
From the course: HTML Essential Training
Responsive width
- In the last video, we just looked at how we can use the image element and the srcset attribute to list a set of image files and have the browser decide which file to download and display considering the pixel density of the screen. What if instead we want the browser to consider the width of the viewport and to choose a file based on the size of the screen as well as the density? Let's look at a demo. It's very similar to the one I just showed in the last video with four images listed inside of a srcset attribute. But this time instead of saying one x, two x, three x, four x, we'll tell the browser how wide each file is, 480w, 960w. That means 480 pixels wide, 960 pixels wide. Now the browser will dynamically choose which image to display based on a combination of device density and viewport width. This is not going to pick the right size image for the layout that you have. It's choosing the image based on an…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.