如何根據分辨率使我的頁面加載不同的圖像？

我正在this site上工作。這是基於Joomla的，所以我不得不在嘗試轉換它時挑選一些新東西。我終於能夠按照我想要的方式使它看起來，但是由於主要背景（圖像模塊）的寬度很寬，在廣泛的分辨率下看起來很棒，但是我有一些問題，但在較小的背景上它很大。如何根據分辨率使我的頁面加載不同的圖像？

有沒有一種方法可以在HTML（或其他方式）中編寫一些代碼，以表明分辨率是否會使模塊顯示該圖像等。

來源

2013-03-12 dreday

我不知道在不同的模塊加載，但你可以使用CSS媒體查詢在特定視窗尺寸的新的背景圖像加載：

@media only screen and (min-width:0px) and (max-width:2099px) 
{ 
    .my_image { background-image:MY_NEW_IMAGE; } 
}

來源

2013-03-12 17:00:53 Lowkase

我只是將它粘貼到主體中，然後更改各個類的寬度，然後放置圖像鏈接？ – dreday 2013-03-12 17:04:06

@media是做什麼的？ – dreday 2013-03-12 17:05:02

@media是一個媒體查詢http://css-tricks.com/css-media-queries/ – DickieBoy 2013-03-12 17:06:27

嘗試

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Demo

來自：Perfect Full Page Background Image，css3技術。

來源

2013-03-12 17:17:39 lngs

我只是複製這個，並把它放在我的template.css文件它會做一切？即使該模塊有其自己的圖像文件放入... – dreday 2013-03-12 18:01:02

我不知道Joomla，但這個想法是使用這個CSS來設置你當前的背景圖像的風格。 – lngs 2013-03-12 18:17:06

如何根據分辨率使我的頁面加載不同的圖像？

回答

相關問題