是否可以根据引导程序中的屏幕尺寸选择图像？答案

【问题标题】：Is possible select an image according to screen size in bootstrap?是否可以根据引导程序中的屏幕尺寸选择图像？
【发布时间】：2016-04-17 22:19:40
【问题描述】：

我想根据显示尺寸显示不同的图像尺寸。例如在我想显示的手机显示屏中

/imageController/myimage/width/100

和

/imageController/myimage/width/1000

在大屏幕上。

这是可能的还是我需要先使用 jQuery 来检测屏幕大小？

非常感谢。

（不要因为这个问题而失去你的 XP 点数。如果我觉得它没用，我会删除它）

【问题讨论】：

您是否尝试过 col-sm,cols-md 来指定块的大小并让图像自动调整到它的 div 即不指定图像大小但指定 div 类？
你为什么不使用img-responsive类。例如：fiddle
我可以使用 img-responsive，但我想加载调整大小的图像以尽量减少带宽使用
您可以查看这篇文章 - 这是响应式图像的未来 srcset ， picture 和小 js picturefill 你现在可以使用它

标签： css twitter-bootstrap

【解决方案1】：

您是否考虑过简单地使用 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' 才能运行上面的代码 sn-p。

这是另一个讨论此方法的 Stack Overflow 帖子：Switching CSS classes based on screen size

我希望这会有所帮助。

【讨论】：