Is possible select an image according to screen size in bootstrap?

Question

I'd like to display a different image size according to display size. For example in a cellphone display I'd like to show

/imageController/myimage/width/100

and

/imageController/myimage/width/1000

in a large screen.

Is this possible or I need to use jQuery to detect screen size first?

Thank you very much.

(Don't lose your XP points downvoting this question. If I find it useless I'll delete it)

did you try col-sm,cols-md to specify size of your block and let image automaticaly adjust to it's div i.e. don't specify image size but specify div class ? — Vinay Prajapati, Jan 13 '16 at 04:19
why don't you use `img-responsive` class. Eg:[fiddle](http://jsfiddle.net/iamraviteja/L0ququLp/1/) — Raviteja, Jan 13 '16 at 04:42
I can use img-responsive, but I'd like to load resized images in order to minimize the bandwidth usage — Allfarid Morales García, Jan 13 '16 at 05:43
You can check this articles - this is the future of responsive images [srcset](http://ericportis.com/posts/2014/srcset-sizes/) , [picture](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/) and with little js [picturefill](http://scottjehl.github.io/picturefill/) you can use it right now — pgk, Jan 13 '16 at 08:00

score 0 · Answer 1 · edited May 23 '17 at 12:23

Have you considered simply using CSS and CSS media queries to specify the content of the image and then change the image's content once the screen size has dropped below a threshold specified in the CSS media query.

If you look in bootstrap.css, you will find the framework already implements many CSS media queries.

I put together a quick test, which ran perfectly in Chrome and IE.

<!DOCTYPE html>
<html>
<head>
    <style>
        #my-image { content:url("[insert path to your full size image]"); }
        @media screen and (max-width: 640px) {
            #my-image { content:url("[insert path to your small size image]"); } /* Once the screen drops below 640px, the new image will show */
            img { border: solid 4px #000; }  /* I'm apply some an additional border to help illustrate when the screen width is below 640px */
        }
    </style>
</head>
<body>
    <img id="my-image" />
</body>
</html>

Important Note You will need to modify the 'content:url' in order for the code snippet above to run.

Here's another Stack Overflow post that discussed this approach: Switching CSS classes based on screen size

I hope this helps.

Is possible select an image according to screen size in bootstrap?

1 Answers1