響應式橫幅圖片

Question

我正在開發一個響應式網站，該網站的橫幅廣告幅面很大。 問題在於，無論屏幕大小如何，它都應該是靜態高度。 因此，當我將圖像設置為width：100％時，它在全尺寸下看起來不錯，但是一旦我開始縮小屏幕，圖像就會變短，然后就需要它的寬度。 我該如何進行設置，以使圖像高度看起來永遠不會改變，並且當屏幕尺寸較小時，圖像尺寸會放大並裁切邊緣？

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

你可以做到這一點的方法之一是喜歡這樣 。

/* 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%;