可以根據自舉中的屏幕尺寸選擇圖像嗎？

我想根據顯示大小顯示不同的圖像大小。例如，在手機顯示我想顯示可以根據自舉中的屏幕尺寸選擇圖像嗎？

/imageController/myimage/width/100

和

/imageController/myimage/width/1000

在一個大屏幕。

這是可能的，或者我需要使用jQuery先檢測屏幕大小？

非常感謝。

（不要失去你的XP點downvoting這個問題。如果我覺得沒用，我會刪除它）

來源

2016-01-13 Allfarid Morales García

您是否嘗試使用col-sm，cols-md來指定塊的大小，並讓圖像自動調整爲div，即不指定圖像大小，但指定div類？ –

你爲什麼不使用'img-responsive'類。例如：[fiddle]（http://jsfiddle.net/iamraviteja/L0ququLp/1/） – Raviteja

我可以使用img-responsive，但我想加載已調整大小的圖像以最大限度地減少帶寬使用 –

你有沒有考慮簡單地使用CSS和CSS媒體查詢指定圖像的內容，然後一旦屏幕尺寸下降到低於CSS媒體查詢中指定的閾值，就更改圖像的內容。

如果你看看bootstrap.css，你會發現該框架已經實現了許多CSS媒體查詢。

我把一個快速測試，在Chrome和IE中完美運行。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     #my-image { content:url("[insert path to your full size image]"); } 
 
     @media screen and (max-width: 640px) { 
 
      #my-image { content:url("[insert path to your small size image]"); } /* Once the screen drops below 640px, the new image will show */ 
 
      img { border: solid 4px #000; } /* I'm apply some an additional border to help illustrate when the screen width is below 640px */ 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <img id="my-image" /> 
 
</body> 
 
</html>

重要提示 您將需要修改 '內容：URL' 爲了讓代碼片段上方運行。

這裏還有一個堆棧溢出的職位，討論了這種方法：Switching CSS classes based on screen size

我希望這有助於。

來源

2016-01-13 04:54:50

可以根據自舉中的屏幕尺寸選擇圖像嗎？

回答

相關問題