Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Conserving Ratio and Serving Optimal Fluid Images in Responsive Design

5.00/5 (2 votes)
27 Jun 2013CPOL 20.1K   46  
How to conserve ratio and serve optimal fluid images in responsive design

Introduction

Maybe you have been faced with the problem of conserving ratio when trying to serve different images for different view-ports, using <div> tag you cannot conserve ratio, but I have found a solution that will make your life easier.

How Does It Work

Ingredients

  • Transparent PNG image with the desired ratio (transparent-ratio-conserver.png)
  • <IMG> tag
  • Different images for different view-ports (retina.jpg, desktop.jpg, tablet.jpg...)
The idea is to open an <img> tag and to assign to it a transparent image (with our desired ratio). We also add class="responsive-image" that's all in HTML.
HTML
<img src="img/transparent-ratio-conserver.png" class="responsive-image">

In the CSS, we set background-size to fit the <img> and we choose the width of our image.

CSS
.responsive-image{
	width: 100%;
	background-size: 100% 100%;
} 

and finally, we serve for every view-port the right image:

CSS
/* Retina display */
@media screen and (min-width: 1024px){
	.responsive-image{
		background-image: url('../img/retina.jpg');
	}
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
	.responsive-image{
		background-image: url('../img/desktop.jpg');
	}
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
	.responsive-image{
		background-image: url('../img/tablet.jpg');
	}
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
	.responsive-image{
		background-image: url('../img/mobile-hd.jpg');
	}
}
/* Mobile LD */
@media screen and (max-width: 350px){
	.responsive-image{
		background-image: url('../img/mobile-ld.jpg');
	}
} 

You can download the demo from here.

Points of Interest

Before that solution, we have to pass with complicated calculation to make <div> tag conserve certain ratio as described in the article: responsive-background-images-with-fixed-or-fluid-aspect-ratios.

Thank you for sending your feedback.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)