From the course: HTML Essential Training
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Responsive pictures - HTML Tutorial
From the course: HTML Essential Training
Responsive pictures
- In the last two videos, I showed you the source set in sizes attribute for the image element and how they could be used to provide multiple image files to the browser and let it decide which one to load and display. In all of those examples, the image itself, the photo of a dog was the same photograph. It'd been saved as many different copies with more pixels or fewer pixels, but the content in the photo was the same the whole entire time. The way it was cropped, its aspect ratio. But what if we want to do more than swap out a low-res file for a high-res file? What if we want to use a different image on a small screen versus a big screen? Maybe we want the image to be tall and narrow on mobile where it's short and wide on desktop. Or even use a completely different photo altogether. Let's look at another example. How about for this photo, on big screens, will show some of the field and her whole body, but on small…
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.