From the course: HTML: Images and Figures
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Testing screen resolutions - HTML Tutorial
From the course: HTML: Images and Figures
Testing screen resolutions
- [Instructor] Admittedly, I cheated a bit in the previous video. I added the width, number of pixels, of the image on the image itself, so it would be obvious which one the browser is displaying. That was a proof of concept to convince you the sourceset and sizes work as advertised. The real issue is this. Now that you could specify a variety of images, you want to know what you're page will look like on a particular mobile device or tablet. And resizing by hand is not the answer. Luckily, both Firefox and Chrome provide a tool to help you with this. In Firefox, you use web developer. Web console. And then click the responsive design mode icon. And then select the inspector view. Now you can select a device to see what the page will look like on that device. When you hover over the image source element in the inspector, you can see the dimensions of the currently selected image. If I go to landscape view, I can again, see what everything will look like and see which image is…
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.