缩放背景图片以适合标签上方的区域

Question

Given a div (or other tag) is it possible to add a large "responsive" image above the tag (think site banner) that has a max width and height and then scales to stay at 100% of the browser width while the height adjusts automatically using only css?

I have tried 3 different method each with have a major downside. On all the methods here is the html used. and the #nav is where I am trying to add the picture above.

<ul id="nav">
    <li>link</li>
</ul>

Method 1

using :before and content:url(img);

CSS:

#nav:before {
    content:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg');
    width:100%;
    display:block;
    overflow:hidden;
}

This method will keep the height correct but will hide the right side of the image if I reduce the size of the screen. I could not find a way to properly scale the content image.

JSFiddle of method 1

Method 2

using :before and background:url() I was able to get the image to scale properly but I am unable to change the value of the height, which gives the huge area below the image.

#nav:before {
    background:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg') no-repeat top;
    background-size:contain;
    width:100%;
    display:block;
    content:"";
    height:400px;
    max-height:480px;
}

JSFiddle of method 2

Method 3

I was somewhat able to achieve the desired effect but the padding-top is dependent on knowing the ration of the height to width for the image. (I fail to understand in css terms how this is working and why this calculation is needed). So for a square image its X/X = 1 or 100% height. And for the 480x780 image it is 61.53%

#nav {
    background:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg') no-repeat top center;
    background-size:contain;
    padding-top:61.53%;
    width:100%;
    display:block;
    height:100px;
    overflow:hidden;
}

This method does produce the desired result but I cannot always know the height and width of the image. So I am looking for a better solution.

I also realize that I could create a media query for each different size and an extra image, but that is way to much work.

JSFiddle of method 3

Any ideas on how to improve one of these methods?

Answer 1

Hm, I hope I got you right. This one is an image above your navigation and it's always 100% wide (same as browser size). It scales up and down on resize and the height is calculated automatically so that the aspect ratio is not affected:

HTML

<img class="banner" src="http://lorempixel.com/output/people-q-c-1200-200-9.jpg">
<ul>
    <li><a href="">link</a></li>
</ul>​

CSS

img.banner {
    width: 100%;
}​

Fiddle

http://jsfiddle.net/7HgU8/