7

So im trying to change the image depending on if the user is on mobile or desktop version.

I have two different images, the one with an "m" in the end is a mini-version which is for desktop, and the other is for mobile. I cant get it to work though.

Here's some code:

HTML (Using Razor, so C# code works):

<img id="ifMobile1" src="images/arts/IMG_1447m.png" alt="">

CSS:

#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
}

@media all and (max-width: 499px) {
    #ifMobile1 {
        background-image: url(/images/arts/IMG_1447.png)
    }
}

Help me please.

Improve this question
2
  • Have you tested on a mobile device? If so - what's the scale resolution of the device? I know my S5 is 3x Commented Mar 10, 2015 at 14:20
  • Yes I have tested it on a mobile device, the rest of my CSS code works so it's fine. Commented Mar 10, 2015 at 14:22

5 Answers 5

Reset to default
18

If you want to live in the future, the <picture> element is the way to go. It still has really bad browser support (only blink based browsers, and firefox beta as of now). The good news is that it falls back to a dumb <img> tag, so no harm done except a little slower loading if it's not supported.

Alright, so how does it work?

Most of this example is taken from html5rocks with some modifications

A picture element looks like this:

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

Try the example for yourself at http://googlechrome.github.io/samples/picture-element/, simply resize the width of the browser to see the kitten change.

The cool thing about the picture element is that it allows you to specify media queries to each of the <source> elements. The last <img> is shown if no source is matched, or if the picture element is unsupported.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Image
Ahh the future... looks awesome.
Image
Yes, the picture element has less support than srcset, but I don't see it as srcset version 2. They "kind of" do the same thing, but in different ways. srcset is better if it's the same image with different resolutions - the browser could then decide for itself what image to load depending on resolution, pixel density, and probably network speed in the future. The picture element on the other hand you decide the images. This can be good or bad. If you want a different image on smaller devices it's the way to go.
Image
@tony.gustafsson Oh thanks for the info! I thought the picture element was the thing that would stay. Do happen to know if one of them is on the way out?
Image
@Ineentho No I think they are both here to stay :) There are parts of these standards that is not yet implemented in any of the browsers, but it will be awesome when we can use it better.
12

Another trick would be to have two img tags, and hide one depending on the device.

HTML

<img id="img1" src="images/arts/IMG_1447.png" alt="">
<img id="img2" src="images/arts/IMG_1447m.png" alt="">

CSS

#img1 {display:block;}
#img2 {display:none}

@media all and (max-width: 499px) {
    #img1 {display: none;}
    #img2 {display: block;}
}
Improve this answer

1 Comment

Image
Display none does not prevent the browser from loading the image still. So this is actually worse as both images are loading on every device.
5

Updated: Please have a look at http://jsfiddle.net/p96denv4/2/

Here's what you would do.

HTML

<div id="ifMobile1"></div>

CSS

#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
    width: set your width  ;
    height: set your height  ;
}

@media all and (max-width: 499px) {
    #ifMobile1 {
        background-image: url(/images/arts/IMG_1447.png)
        width: set your width  ;
        height: set your height  ;
    }
}
Improve this answer

2 Comments

Image
Try display: block and also make sure it is pointing to the right path of your image. Is your stylesheet in your main root?
Image
Please see my JSFIDDLE - jsfiddle.net/p96denv4/2 Your background image should be showing. I don't think you can really use img tag to change the image source for mobile at this day and age. Due to browser support.
0 
img#id {
    content:url(http://example.com/image.png);
}

this may be of use to you, define each of your images in the respective media queries.

Improve this answer

2 Comments

Image
This is not useable on all browsers. IE, Firefox will fail as content:url() isn't supported
Image
Tested in firefox version 36.0.1 and nothing shows? jsfiddle.net/3BRN7/406
-3

you can't change an image source like that. You'll need to use a div with the original as a background image for this to work.

<div id="ifMobile1" style="background-image: url(images/arts/IMG_1447m.png);"></div>
Improve this answer

19 Comments

Image
And what about the CSS?
Image
lol @Jackhardcastle really?? you think you can change an image source with css? you've down voted my answer and you have no idea what you're talking about?
Image
That did not work, it has to be an img element, the div didn't show anything at all.
Image
Use your original css with the height and width of the image applied.
Image
Yes, I do believe that @Aaron
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.