jquery - 根据屏幕分辨率更改img src路径

Question

我想知道是否可以使用 CSS 媒体查询来更新 img src 的路径。

下面的代码在循环中运行来设置它。但如果屏幕分辨率高于某个值，我想使用“大”文件夹中的按钮。

var $btnImg = $("<img>", {
    id : "toolbar_button_" + button.widgetId + "_image",
    src : "images/toolbar/buttons/" + button.imageFileName,
    alt : button.displayName,
    "unselectable" : "on"
});

即我希望 src 属性为:

src : "images/toolbar/buttons/large" + button.imageFileName,

这可以通过 CSS 来完成吗？我已经捕获了其他样式的屏幕分辨率？或者只能使用 JavaScript 来完成，例如jQuery？

非常感谢您的帮助。

Answer 1

您可以简单地检查窗口宽度并据此更改 src:

var $btnImg = $("<img>", {
    id : "toolbar_button_" + button.widgetId + "_image",
    src : getSrc(),
    alt : button.displayName,
    "unselectable" : "on"
});

function getSrc() {
    var src = "images/toolbar/buttons/";
    if( $(window).width() > 800 ) {
        src += "large/";
    }
    src += button.imageFileName;
    return src;
}        

编辑:我忽略了你询问 CSS 的部分。其他答案将告诉您如何根据屏幕分辨率更改 css 属性。例如，您可以使用它们通过媒体查询来更改背景图像的 url。但是，您无法仅使用 css 来更改实际图像 src。