我想根据显示尺寸显示不同的图像尺寸。例如，我想在手机显示屏上展示
/imageController/myimage/width/100
和
/imageController/myimage/width/1000
在大屏幕上。
这是可能的还是我需要先使用 jQuery 来检测屏幕尺寸？
非常感谢。
(不要因为拒绝这个问题而失去你的 XP 点数。如果我发现它没用，我会删除它)
最佳答案
您是否考虑过简单地使用 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>重要提示 您需要修改“content:url”才能运行上面的代码片段。
这是讨论此方法的另一篇 Stack Overflow 帖子:Switching CSS classes based on screen size
希望对您有所帮助。
关于css - 是否可以根据 Bootstrap 中的屏幕大小选择图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34758269/