如何讓我的圖像與用戶屏幕的大小相關？

Question

我有一個高度爲480px的圖像。在我的Macbook上它看起來不錯，但是當我去看我的30英寸顯示器時，顯然底部有一個巨大的空間。

我能做些什麼來確保480px總是與用戶的屏幕大小相關？

我做了一些搜索，似乎使用背景圖像：封面或背景位置我可以做一些東西，但很可能它不是我所期待的。我能做些什麼來解決這個問題？

Answer 1

實現此目的的一種方法是將圖像放入可與頁面一起縮放的容器中。

高度是一個可縮放的硬屬性，但只要所有父元素都具有指定的高度，您也可以實現此屬性。 您可以使用CSS代碼，例如

height:40%; 

規模元素。

規模這裏頁面的高度來看一看吧：http://jsfiddle.net/L7uWd/

Answer 2

嘗試用百分比來設置圖像大小爲每個瀏覽器寬度的寬度。根據窗口大小重新調整元素的大小時，最好將寬度設置爲百分比（而不是像素）。

設置image height to some percentage instead of pixel，這將自動處理與屏幕的大小。