Removing width and height attributes from wp-get-attachment

Question

I'm using this http://www.ghosthorses.co.uk/production-diary/removing-inline-img-dimensions-for-responsive-wordpress-websites/ to remove the height and width attributes of images. Everything works fine except that it messes up the masonry container because of the images have no height. How could I apply this filter only to a determined div id/class?

Answer 1

You might have better luck using wp_get_attachment_url( $id ) rather than wp_get_attachment_image(). Take a look at the WordPress codex for the call.

Answer 2

As I guess what you're after (and which is off topic here), I'll briefly explain what is...

The problem

IE (versions 6, 7, and 8 and under its “compatibility mode”) will not render an image when that image has blank width and height attributes (...)

So this code will produce no images in IE:

<img src="logo.png" alt="company logo" width="" height="" />

But this will:

<img src="logo.png" alt="company logo" width="200" height="50" />

^Source

The "Solution"

Here is a spreadsheet of all currently available techniques. From this spreadsheet you can read that the idea of Harry Roberts seems to be the "best" (currently).

Summed up briefly: The idea is to set one image and surround it with a div that has a background image.

<!-- HTML -->
<div class="r-img" style="background:url(link/to/large/version); width:[width-of-image]px; height:[height-of-image]px;">
    <img src="link/to/small/version" alt="" />
</div>

/* CSS */
.r-img img{
    /* Hide image off-screen on larger devices, but leave it accessible to screen-readers */
    position:absolute;
    left:-9999px;
}

/*--- RESPONSIVE ---*/
@media(max-width:480px){
.r-img{
    /* Remove styling from the div */
    background:none!important;
    width:auto!important;
    height:auto!important;
}
.r-img img{
    /* Bring smaller image back into view */
    position:static;
    max-width:100%;
}

Unfortunately, users on larger screens will still download both images…

That's the only contra with this solution.