响应式横幅图片

Question

I am developing a responsive website which has a large banner image which spans edge to edge. The problem is that its supposed to be a static height regardless of the screen size. So when I set the image to width:100% it looks great in full size, but as soon as I start to shrink the screen the image gets shorter then the width that it needs to be. How can I set this up so that the image height appears to never change and when the screen size is smaller then the image size it zooms in and crops the edges?

http://bit.ly/1qxmZir

HTML

<div id="hd-img">
    <img src="http://72.52.242.20/~camacoll/wp-content/uploads/2014/05/inner-hd.jpg"> 
</div>

CSS

#hd-img {
    max-height: 352px;
}

img {
    width: 100%;
    height: auto;
    left: 100%;
    margin-left: -200%;
    position: relative;
} 

Answer 1

One way you could do it is like this .

/* CSS */

#hd-img {
    height: auto;
    overflow: hidden;
}

#hd-img img {
    /* Optional max width: 600px; */
    display: block;
    margin: 0 auto;
}

Answer 2

尝试这个：

background-image:url(../images/header-bannerbg.png);background-position:fixed;background-repeat:no-repeat;height:580px;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;