CSS - 如何設置標題圖像使用例如。 Facebook的？

我想知道如何在我的網站上設置標題圖片。基本問題 - 假設我在我的筆記本電腦上 - 寬度分辨率大約爲1280像素。我有一個像2000像素的寬度的標題圖像。CSS - 如何設置標題圖像使用例如。 Facebook的？

我想實現的是，在我的筆記本電腦上將這個標題圖像重新調整到1280像素，並在我的LCD顯示器上（寬度分辨率爲±1900像素）顯示1900像素的圖像 - 我的意思是兩種情況都適合顯示。

我當前的CSS設置是width: 100%; - >這會導致在我的筆記本電腦上裁剪2000像素寬度的圖像 - 僅顯示圖像的2/3。

有沒有什麼辦法可以設置圖像始終適合顯示？

2012-12-31 user984621

您正在尋找下面的CSS：

.headerimage{ 
    background-image: url(...); 
    background-size: contain; 
}

這個大小調整的背景圖像與容器大小相符。

來源

2012-12-31 00:07:07

我認爲最直接和最徹底的方法，謝謝。 – user984621

它是否適用於CSS2？ –

您對「CSS2」有什麼意思？如果您正在尋找瀏覽器支持，請參閱http://caniuse.com/#search=background-size –

你可以申請media queries：

瀏覽器窗口寬度小於1280px

@media (max-width: 1280px) { 
    #myHeader { 
     width: 50% // resize it to 50% when the browser screen is **LESS** than 1280px 
    } 
}

瀏覽器窗口寬度大於1280px超過2000像素大，但小：

@media (min-width: 1280px) and (max-width: 2000px) { 
    #myHeader { 
     width: 75% // resize image at 75% when the browser screen is **BETWEEN** 1280px and 2000px  
    } 
}

瀏覽器窗口寬度小於2000像素大：

@media (min-width: 2000px) { 
    #myHeader { 
     width: 100% // resize header to 100% when screen is **LARGER** than 2000px 
    } 
}

等等。根據需要自定義斷點和寬度。

來源

2012-12-31 00:08:31 jviotti

是有可能使用javascript：

<script> 
// first set viewport width and viewport height to vpw and vph 
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],vpw=w.innerWidth||e.clientWidth||g.clientWidth,vph=w.innerHeight||e.clientHeight||g.clientHeight; 

d.getElementById("your_image_id").style.width(vpw+"px"); 
</script>

來源

2012-12-31 00:08:58

CSS - 如何設置標題圖像使用例如。 Facebook的？

回答

相關問題