Change img src path based on screen resolution

Question

I was wondering if it is possible to use CSS media queries to update the path to an img's src.

The code below is run in a loop to set this. But I want to use the buttons in a "large" folder if the screen resolution is above a certain value.

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

i.e. I would like the src attribute to be:

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

Can this be done via CSS where I am already capturing the screen resolution for other styling? Or can this only be done using JavaScript, e.g. jQuery?

Many thanks for any help.

Stephan Muller · Answer 1 · 2014-09-10T11:45:06.913

You could simply check for the window width and change the src based on that:

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;
}

Edit: I overlooked the part where you ask about CSS. The other answers will tell you how to change css properties based on screen resolution. You could use those for example to change the url of a background image by using a media query. However, you cannot change an actual image src by just using css.

score 1 · Answer 2 · answered Sep 10 '14 at 11:50

Although you can't actually change the image src with CSS alone, you can cheat by replacing the src with a background image.

FIDDLE (Be sure to resize window)

<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;
    }
}

With the above sample code: when you resize the browser window to less than 900px the media query kicks in and replaces the src with the new background img

While this is a creative solution to certain problems, please do note that this is a bit of a 'hack', and not recommended if you can avoid it imo. Still, +1 for a nice workaround to replacing an image in an `img` tag using just CSS — Stephan Muller, Sep 10 '14 at 12:01

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

You have an example how to set the background-image:url("logo.png"); in css: Define an <img>'s src attribute in CSS

Then you can use @media for the responsive page

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

edited May 23 '17 at 11:57

Community

1
1

answered Sep 10 '14 at 11:41

schlagi123

715
4
11

score 0 · Answer 4 · answered Sep 10 '14 at 11:42

0

You can go with CSS media queries

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

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

More Reference 1 Reference 2

answered Sep 10 '14 at 11:42

ashokhein

1,048
12
38

score 0 · Answer 5 · answered Sep 10 '14 at 11:47

I would use a background image on a div to do this in CSS along with a media query.

@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;
    }
}

score 0 · Answer 6 · answered Sep 10 '14 at 11:47

You need to use a min-width declaration to specify a minimum browser width for the desktop image and a max-width for the mobile image.

<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;
  }
}

Change img src path based on screen resolution

6 Answers6

CSS