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。

Answer 2

虽然单独使用CSS无法实际更改图像src，但您可以通过将背景图像替换为src来作弊。

FIDDLE （务必调整窗口大小）

<img src="http://placehold.it/200x200" />

CSS

@media (max-width: 900px) {
    img {
        background: url(http://lorempixel.com/200/200) no-repeat;
        width: 0;
        height: 0;
        padding: 100px;
    }
}

使用上面的示例代码：当您将浏览器窗口的大小调整为小于900px时，媒体查询将启动并用新的背景替换src

Answer 3

您有一个示例如何在css：Define an <img>'s src attribute in CSS

中设置background-image:url("logo.png");

然后您可以使用@media作为响应式页面

@media (max-width: 599px){
  ...
}
@media (min-width: 600px) and (max-width: 999px){
  ...
}
@media (min-width: 1000px){
  ...
}

Answer 4

您可以使用 CSS媒体查询

<style>
@media (max-width: 600px) {
  .button_large {
    width : 300px;
  }
}
</style>

<style>
@media (max-width: 900px) {
  .button_large {
    width : 400 px;
  }
}
</style>

更多Reference 1 Reference 2

Answer 5

我会在div上使用背景图像在CSS中执行此操作以及媒体查询。

@media (min-width: 500px){
    div.button {
        vertical-align: middle;
        background-image: url(images/toolbar/buttons/button.png);
        background-repeat: no-repeat;
        width: 34px;
        height: 32px;
    }
}

Answer 6

您需要使用min-width声明来指定桌面图片的最小浏览器宽度，并为移动图片指定max-width。

<style type="text/css"> 
@media all and (min-width: 501px) { 
#page {background-image:url('test5-desktop.png');width:200px;height:75px;}} 
@media all and (max-width: 500px) { 
#page background-image:url('test5-mobile.png');width:200px;height:75px;}} 
</style>

OR

@media (min-width: 601px) {
  #page {
    background: url('test5-desktop.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('test5-mobile.png') repeat-x;
  }
}

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

6 个答案:

CSS