This proposal adds new elements and attribute to [HTML5] to enable different sources of images based on browser and display characteristics. The proposal addresses multiple use cases such as images used in responsive web designs and different images needed for high density displays.
Back in January, we published an article on responsive design, “Responsive Web Design: What It Is and How to Use It.” Responsive design continues to get a lot of attention, but considering how different it is from the “traditional” way of designing...
Responsive web design has become a large topic of study over just a couple of years. Web developers are looking to keep up with trends and support the most common Internet-accessible devices. This used to mean only desktops and laptops, but now we have tablets and dozens of various smartphones all running wi-fi.
In HTML, a user agent's environmental conditions are primarily expressed as CSS media features (e.g., max-width, orientation, monochrome, etc.) and CSS media types (e.g., print, screen, etc.). A responsive image is an image that a developer explicitly adapts in response to different environmental conditions: adaptations can include, but are not limited to, changing the width, height, or even the source of an image.
What's the easiest way to scale background images in responsive layouts? We use an old technique and enhance it to fluidly change the aspect ratio of background images.
Responsive layouts make it possible to dynamically scale the width of a website to fit on small mobile devices as well as larger desktop computers. An element with a percentual width will have its height automatically adjusted. Its aspect ratio remains the same when it is resized.
If we want to accomplish the same with background images we must figure out how to maintain the aspect ratio of any HTML element.