[RESOLVED] Shrink images after zoom to prevent overflow

[dday9]

How am I able to resize images after a user zooms in a page or if the user is using a smaller screen(mobile)? Currently this is my code: http://jsfiddle.net/dday9/k9gbw1gw/

[tr333]

Sounds like you want the picture element, currently available only on Chrome/Chromium and Opera, or the srcset attribute on the img element.

http://www.smashingmagazine.com/2014...icture-srcset/
http://responsiveimages.org/

And one more thing, when creating a fiddle (awesome!!), you can replace your normal image references with a placeholder image link to get a placeholder image.

[dday9]

Sounds like you want the picture element, currently available only on Chrome/Chromium and Opera, or the srcset attribute on the img element.

Drats, the majority of my user base will be using IE10(and I hate developing just for IE). For now it's no big deal, it was just a pet peeve of mine that I wanted fixed.

you can replace your normal image references with a placeholder image link to get a placeholder image.

That is awesome, I'll be sure to use that in the future.

[tr333]

Looks like you might be in luck. Some guys have made a polyfill for this.

http://www.smashingmagazine.com/2014...fect-polyfill/
https://scottjehl.github.io/picturefill/

[dday9]

It's frustrating to go to caniuse.com and see IE really not supporting any of the leading html tags or attributes. Heck, IE doesn't even support <main>, the only major browser that does not use <main> is Opera Mini.