title: 100% width background image with an 'auto' height
body: <p>I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there'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've realised that I'd like to use media queries to serve different images based on different resolutions - let's say a small, medium and a large version of the same image, for example. I know you can'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.</p>
  <p>I can'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 'width: 100%' 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't the solution as there isn't a fixed height. I had a play and found that once there is a height (tested with 150px) I can use 'background-size: 100%' to fit the image in the div correctly. I can use the more recent CSS3 for this project as it's aimed solely at mobile.</p>
  <p>I'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.</p>
  <pre><code>&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;
  </code></pre>
  <p>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?</p>
  <p>Also, do you think CSS backgrounds are the best way to do this? Maybe there'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.</p>
  <p>I apologise is this is a little long-winded but I'm back and forth from this project to the next so I'd like to get this little thing done.</p>