CODEWITHSUNDEEP
jqueryhtmlcssimage
eebsie
eebsie

Reputation: 506

Change img src path based on screen resolution

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.

Upvotes: 2

Views: 3178

Answers (6)

schlagi123
schlagi123

Reputation: 735

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){
  ...
}

Upvotes: 0

Danield
Danield

Reputation: 125503

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

Upvotes: 1

Hamix
Hamix

Reputation: 1335

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

Upvotes: 0

Ceres
Ceres

Reputation: 3648

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

Upvotes: 0

Stephan Muller
Stephan Muller

Reputation: 27600

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.

Upvotes: 1

ashokhein
ashokhein

Reputation: 1058

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

Upvotes: 0

Related Questions