响应式图像 src 取决于媒体答案

【问题标题】：Responsive image src depending on media响应式图像 src 取决于媒体
【发布时间】：2014-02-28 01:16:38
【问题描述】：

您好，我正在使用 Twitter Bootstrap 3.1.1

有没有办法通过使用某种类来为不同的媒体使用不同的 src？由于图像仍在加载，因此隐藏内容不起作用。

类似：

<img xs-src="images/xs_img.jpg" md-src="images/md_img.jpg" class="img-responsive" >

是使用javascript的唯一方法吗？或者是否已经在引导程序 3 中针对此类问题实现了某些功能。

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

我创建了自己的js代码

注意：js代码应该在页面底部，否则第一次加载页面时img不存在。

var timeout=0;
$(window).resize(function(){
    clearTimeout(timeout);
    timeout=setTimeout(function(){
        resizeWindow();
    },500);
});

function resizeWindow(){
    var windowWidth=$(window).width();
    switch(true){
        case(windowWidth<750):/* you could specify other sizes to suit your needs*/
            $("img").each(function(){
                if($(this).attr("data-xs-src")){
                    $(this).attr("src",$(this).attr("data-xs-src"))
                }
            })
        break;
        default:
            $("img").each(function(){
                if($(this).attr("data-default-src")){
                    $(this).attr("src",$(this).attr("data-default-src"))
                }
            })
    }
}
resizeWindow();//use setTimeout if js code is in header

HTML代码

<img data-default-src="images/img.jpg"  data-xs-src="images/xsimg.jpg" >

【讨论】：

我的网站没有太多应该以不同方式显示的图像。每页只有 1-2 个，所以可以使用这种方法。我不确定如果它有很多沉重的 img 是否仍然可以使用它。

【解决方案2】：

试试这个 JavaScript 框架：RetinaJS

我从未使用过它，但它看起来又漂亮又简单。

编辑：还有另一种方法可以做到这一点，只需定义 img 的大小元素并将@2x 图形作为每个显示的源，将也可以工作

【讨论】：

thx 但我并没有真正使用更少的代码，我只使用 scss/sass 和 4kb 的代码来编写我编写的 27 行代码，我将使用我的代码。
呵呵，作为信息，Bootstrap 的代码比你自己编写响应式设计要多得多^^
我知道这就是为什么我要问 twitter bootstrap 3 中是否有类似的东西。