I&#39;m currently working on a mobile landing page for a company. It&#39;s a really basic layout but below the header there&#39;s an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I&#39;ve realised that I&#39;d like to use media queries to serve different images based on different resolutions - let&#39;s say a small, medium and a large version of the same image, for example. I know you can&#39;t change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML.

I can&#39;t seem to get this working properly as the div with the background image needs both a width and a height to show the background. I can obviously use &#39;width: 100%&#39; but what do I use for the height? I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn&#39;t the solution as there isn&#39;t a fixed height. I had a play and found that once there is a height (tested with 150px) I can use &#39;background-size: 100%&#39; to fit the image in the div correctly. I can use the more recent CSS3 for this project as it&#39;s aimed solely at mobile.

I&#39;ve added a rough example below. Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer.

	&lt;div id=&quot;image-container&quot;&gt;
		&lt;div id=&quot;image&quot; style=&quot;background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;

Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?

Also, do you think CSS backgrounds are the best way to do this? Maybe there&#39;s a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.

I apologise is this is a little long-winded but I&#39;m back and forth from this project to the next so I&#39;d like to get this little thing done. Thanks in advance for your time, it&#39;s much appreciated.
Regards

All Responsive Images Solutions on Gang of Coders

Total of 1 Responsive Images Solutions

100% width background image with an 'auto' height