CODEWITHSUNDEEP
twitter-bootstrap-3
saintlyRook
saintlyRook

Reputation: 495

Swapping images in Bootstrap for different screen sizes

I want to display one large image for regular screens and ipads and then drop down to a smaller image, an actual different image not scaled, when in mobile screen. How can I achieve this with just css and html and bootstrap (no JS). Is there a way? Thanks

Upvotes: 2

Views: 2938

Answers (1)

cvrebert
cvrebert

Reputation: 9289

There's a kinda hacky method involving background-image and media queries: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/

(See the full article for the additional details needed for a production-ready battle-tested version.)

It boils down to:

#image { 
  background-image: url(your-large-image.jpg); 
}

@media only screen and (max-width: 320px) { // change/add media queries as necessary
  #image { 
    background-image: url(your-small-image.jpg); 
  }
}

<div id="image"></div>

There's also the <picture> element and the srcset attribute, but neither of those are fully standardized or widely supported at this time.

You might be best served by dropping the "no JavaScript" requirement and using something like Interchange.

Upvotes: 2

Related Questions