Having recently purchased the “Implementing Responsive Design” book I’ve been using some of the approaches on a current project, good book!

I have one problem that I’m struggling to get to grips with when I’m serving images to certain screen sizes. I’m using the “data-” attribute and matchmedia to only pull in a couple of images once a certain screen dimension is hit. This works perfectly across Firefox, Chrome, Safari, Opera but with IE9 the element inserted via matchmedia has a width and height attached to it thus breaking the responsive nature of the image and also my layout!

So my question is how would I go about removing the height & width element from the image returned by the matchmedia javascript or is there another solution?

Here is my code (all from the book rather than written by myself) below in hope that someone much smarter than me can help me with a solution.

HTML First

Here’s the Javascript

window.onload = function() {

//images enhancement
if (window.matchMedia(“(min-width: 46.875em)”).matches) {
//load in the images

Tips

Categories

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.