Changing image sizes with media queries
In this recipe, you will learn how to resize an image with a CSS media query. This can be useful in a number of situations, especially those where you want to download only one image and use it in different size versions in your responsive layout.
Getting ready
This is a good method for size variation that can be handled on the client side, but be careful not to abuse this method by causing the client to download a really large image file and do heavy resizing in their browser. There are better ways to do that, which were discussed in Chapter 1, Responsive Elements and Media.
How to do it…
I recommend putting together a small HTML page with a h1 title, the wrap element, and inside wrap, an image and a paragraph ...
Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
