在各種設備上顯示不同的圖像

我在首頁上有一張圖片（http://www.ckdev.info/cdp），這是一個行動呼籲以完成免費估算的表單。桌面或平板電腦（橫向）非常棒，因爲窗體顯示在右側。

但是，在其他設備或方向上查看時，視口太小，無法將側邊欄顯示在右側，並且會下降到底部。所以「右箭頭」圖像沒有邏輯意義。

我想要做的是一個「if-else」解決方案。如果屏幕寬度爲xx px或更大，則顯示「right-arrow.jpg」，否則顯示「down-arrow.jpg」。我將附加一個錨到表單，以便在顯示時點擊/觸摸down-arrow.jpg將向下滾動到表單。

恐怕我沒有編碼器，所以我毫不懷疑這可以做到，我不知道該怎麼做！謝謝。

來源

2014-09-24 Ian Shere

你想要的是一個CSS媒體查詢來改變顯示的圖像。

對於像波泰特iPhone的智能手機將是類似的東西：

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)

{/ * STYLES GO HERE * /}

詳情看一看：

w3schools

cssmediaqueries

來源

2014-09-24 18:02:36

當心IE瀏覽器中的這些媒體查詢，它並不總是和他們一起玩。 – 2014-09-24 19:08:30

你可以用CSS媒體查詢來做到這一點。

試試這個：（變化900px和899px到你想要的值）

@media(min-width: 900px) { 
    #img { 
     width: 100%; 
     height: 150px; 
     background: url('http://www.ckdev.info/cdp/images/estimate.png'); 
     background-size: contain; 
     background-repeat: no-repeat; 
     background-position: center; 
    } 
} 

@media(max-width: 899px) { 
    #img { 
     width: 100%; 
     height: 100px; 
     background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/ 
     background-size: contain; 
     background-repeat: no-repeat; 
     background-position: center;   
    } 
}

看看這裏：jsFiddle（調整結果窗口寬度超過900px）

我只是做你的在不同的媒體查詢上顯示不同大小的圖片，而是將您的背景網址更改爲您需要的圖片。

來源

2014-09-24 18:02:43

這看起來很簡單 - 謝謝。感謝所有那些快速回復 - 太棒了！所以這將在我的CSS文件中？那麼，如果我的圖像是

...

我使用

？或者它是一種風格？ – 2014-09-24 18:42:47

是的，把它放在你的CSS中。你可以像使用

（無分號），然後使用.img {}插入#img {} – 2014-09-24 18:47:27

這絕對是單一圖像交換的方式。我提到了js版本，因爲我使用自定義數據源屬性爲媒體交換了我網站上的大多數圖像。如果您不必擔心動態數據源或客戶端添加的內容，那麼要比使用CSS的方式更容易。 – 2014-09-24 19:06:45

只要您不介意來自滾動條的窗口寬度中的某些差異，就可以使用jQuery無需額外任何額外的工作就可以實現此目的。我會在一秒內回到滾動條。要測試寬度，您可以使用jQuery(window).width()。這將以像素爲單位返回窗口的寬度。正是你在找什麼。一個示例代碼片段：

jQuery(document).ready(function(){ 
    if (jQuery(window).width() > 1000){ 
    jQuery(<select img here>).attr('src', '/path/to/new/image.jpg'); 
    } 
});

我注意到你沒有在你提到的圖像上有類或id。我會建議添加一個ID，以便於選擇。例如，<img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">。如果您進行這項更改，您可以換出<select img here>代替'img#estimate-with-arrow'（這將選擇帶箭頭的id估算圖像）。瞧，圖像交換。

我會注意三件事情。首先，這隻會在初始頁面加載時起作用。如果用戶以完整桌面寬度加載頁面然後縮小頁面，則圖像在通過中斷點時不會更改。您需要綁定到調整大小得到這個工作：

jQuery(window).resize(function() { 
    <code here> 
});

其次，我成立了這個特殊的代碼在 1000像素換出圖像的任何屏幕。這意味着您只會爲較小的設備加載一個圖像，從而節省帶寬。這是首選，廣告移動計劃更挑剔。

第三，滾動條。使用jQuery測試窗口寬度將不會匹配與CSS相同的中斷點。我使用modernizr來解決這個問題。雖然這有點高級。

來源

2014-09-24 18:03:06

在各種設備上顯示不同的圖像

回答

相關問題