網頁設計中的廣泛圖像

我正在編寫一個網站，並試圖找到像www.airbnb.com這樣的東西：我的意思是一個靜態的欄位（這部分是確定的）和一個大圖像，下面是一個大的中心按鈕。網頁設計中的廣泛圖像

我該如何設法讓這個大圖像在每個屏幕分辨率上正常顯示：目前，在1920×1080px的時候，我的圖像與大按鈕爲中心完美匹配。但是，如果我改變我的決議，圖像將被裁剪或調整大小...

你知道我該怎麼做（CSS或JavaScript）？

非常感謝！

2012-08-23 Alex Grs

'img {width：100％; }'會大幅度縮放您的圖片到任何容器中 –

你可以使用CSS媒體查詢加載因分辨率不同的物理尺寸圖像例如

你原來的桌面背景：

body { 
    background:url(images/bg1.jpg) no-repeat 0 0; 
}

對於具有800像素一個最大分辨率屏幕：

@media (max-width: 800px) { 

    body { 
     background:url(images/bg2.jpg) no-repeat 0 0; 
    } 

}

對於具有480像素一個最大分辨率屏幕：

@media (max-width: 480px) { 

    body { 
     background:url(images/bg3.jpg) no-repeat 0 0; 
    } 

}

的決議你的選擇顯然取決於你自己，以上僅作爲例子給出。

2012-08-23 09:28:29

我試過了，它正在工作。它是否與所有導航器兼容？ –

@AlexGrs - 你的意思是瀏覽器？如果是的話，它與大多數瀏覽器兼容。請參閱此鏈接：http://caniuse.com/css-mediaqueries –

是的，我想說「瀏覽器」對不起:-)！ –

如果您使用的是<img>，那麼請將width和height屬性設置爲它。

如果您正在使用的圖像作爲背景，以現有的元素，設置背景正確styles：

div{ 
    background:url(img_flwr.gif); 
    background-size:80px 60px; 
    background-repeat:no-repeat; 
}

2012-08-23 09:06:51 badunk

需要注意的是，上述解決方案依賴於CSS3 background-size屬性，該屬性不適用於較舊的非CSS3兼容瀏覽器。 –

回答