100% 宽度的自动高度背景图片

You can use the CSS property background-size and set it to cover or contain, depending your preference. Cover will cover the window entirely, while contain will make one side fit the window thus not covering the entire page (unless the aspect ratio of the screen is equal to the image).

Please note that this is a CSS3 property. In older browsers, this property is ignored. Alternatively, you can use javascript to change the CSS settings depending on the window size, but this isn't preferred.

body {
background-image: url(image.jpg); /* image */
background-position: center;      /* center the image */
background-size: cover;           /* cover the entire window */
}

Instead of using background-image you can use img directly and to get the image to spread all the width of the viewport try using max-width:100%;.

Please remember; don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule, you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio.

Edit: Changing the image on different size of the window

$(window).resize(function(){
var windowWidth = $(window).width();
var imgSrc = $('#image');
if(windowWidth <= 400){
imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
}
else if(windowWidth > 400){
imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

In this way you change your image in different size of the browser.

Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover (which will allow the image to extend out from the sides) or contain (which does not allow the image to extend out at all), just set the CSS like so:

body {
background-image: url(img.jpg);
background-position: center top;
background-size: 100% auto;
}

This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript.

EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know.

Hopefully soon you'll be able to use the new srcset attribute on the img element. If you want to use img elements now, the currently accepted answer is probably best.

However, you can create a responsive background-image element with a constant aspect ratio using purely CSS. To do this, you set the height to 0 and set the padding-bottom to a percentage of the element's own width, like so:

.foo {
height: 0;
padding: 0; /* remove any pre-existing padding, just in case */
padding-bottom: 75%; /* for a 4:3 aspect ratio */
background-image: url(foo.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}

In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value. This works because padding percentage is always calculated based on width, even if it's vertical padding.

Try this

html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Simplified version

html {
background: url(image.jpg) center center / cover no-repeat fixed;
}

Just use a two color background image:

<div style="width:100%; background:url('images/bkgmid.png');
background-size: cover;">
content
</div>

Add the css:

   html,body{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100%;
}

And html is:

<div class="bg-mg"></div>

CSS: stretching background image to 100% width and height of screen?

It's 2017, and now you can use object-fit which has decent support. It works in the same way as a div's background-size but on the element itself, and on any element including images.

.your-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

html{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}

I was also facing your problem. Two solutions come to my mind through HTML and CSS :

Solution 1) HTML img tag

.img-container {
width: 100%;
border: 1px solid #000;
}
.img-container img {
width: 100%;
pointer-events: none;
}

<div class="img-container">
<img src="https://i.postimg.cc/ht1YnwcD/example.png">
</div>

Solution 2) CSS background image

First find width and height of your image file, you can right click on your image and choose Properties then go to details tab. you can see your image dimensions (according to the picture). enter image description here

Then remember them.

.img-container {
width: 100%;
// height: calc(100vw / (your image width / image height));
height: calc(100vw / (812 / 133));
background-image: url('https://i.postimg.cc/ht1YnwcD/example.png');
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto;
border: 1px solid #000;
}

<div class="img-container"></div>

I hope it was useful ;)