使圖像100％的高度，但成比例的寬度

我有一個問題，我想我只是麻煩的措辭問題，這就是爲什麼我找不到答案。使圖像100％的高度，但成比例的寬度

我有一個網站有一個跨越100％高度的圖像。當您在1000像素以上的視口寬度上查看它時，它看起來很棒。但是當你向下滾動它明顯扭曲和超拉伸，就像下面的圖片：

enter image description here

我的問題是，我怎麼能有一個形象不是一個背景圖片，綿延100％的高度，但保持寬高比。有點像超大的js插件，但只在一個div而不是整個背景。

現場真人版可以在http://faithpointdallas.com/422studios

它的工作原理根據需要在Firefox和Safari中完全吸收可見。任何方式來完成Firefox的結果在所有瀏覽器？

非常感謝您的幫助。

來源

2013-02-04 Daniel White

爲什麼不使用背景圖片？有background-size財產，正是你想要的。

在HTML中刪除topImage股利和嘗試這個辦法：

div.top { 
    background: url("../img/dallas.jpg") no-repeat scroll center center/cover transparent; 
    min-height: 300px; 
    overflow: hidden; 
    position: relative; 
}

來源

2013-02-04 23:46:14 jgthms

我已經這樣做了，但就像我很害怕，它不會在Safari或者IE 8的工作我不在乎關於IE 7，但它也必須適用於8。所以沒有辦法做到這一點跨瀏覽器兼容？您可以在網站上查看修改。 –

好吧，我已經開始工作了，只爲未來的人看這個，我不得不添加「respond.js」給我的js包括一切工作在IE7 +。我還必須添加背景大小：封面;在一條獨立的線上而不是簡單的背景風格。萬物現在工作。 –

我認爲你應該使用CSS來提及寬度爲100％。它應該解決你的問題。

background-size: 100%;

更多做檢查這裏http://www.css3.info/preview/background-size/

來源

2013-02-04 23:45:52

使圖像100％的高度，但成比例的寬度

回答

相關問題