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。