![]() The element is an HTML feature that allows you to offer alternative versions of an image based on the presence of specific media features. And although I’m using CSS in all the examples to change the width of the images when the user resizes the browser, the image itself never actually changes once the page is loaded. So far, the features I’ve discussed for incorporating responsive images are assuming that I’m always displaying the same image but at different sizes and resolutions. See the Pen Responsive Images Using srcset and sizes by Louis Lazaris on CodePen. For convenience, I’ve included a text overlay on each of the images so you can see which loads when you view the page. You can also open the page using a variety of real devices to do a true test. Note that in this case, you’ll have to test on something that mimics different devices (like the DevTools in Chrome). You can view the example code in action using the CodePen demo below. ![]() As mentioned, this ensures the browser will have something to display if none of the media conditions are met, working as a default. The last string is a slot value alone, with no media condition. The default full size image (2000w) will fill a 1000px slot if the previous media conditions aren’t met.A 1000px wide viewport will load the 800w image in an 800px slot.A 600px wide viewport will load the 480w image from the srcset value inside a slot that’s 480px in width.In my case, I can break down the sizes value as: The fact that the slot values don’t match exactly to the width descriptors is fine. See the Pen Responsive Images with Plain CSS by Louis Lazaris on CodePen. It’s best to open the demo in a new window if you want to test out the responsiveness. You can try out this simple example using the following CodePen. If I remove the height: auto line, the image will stay at the height defined in the HTML, regardless of the width – which is usually not what I want. The height value of auto ensures that the height of the image keeps the image dimensions proportional with its natural width and height. The max-width property is set to 100% to ensure it fills whatever space is needed, up to a maximum of 1000px (the value from the HTML).
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |