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?


2 Answers 2


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.

  • I tried it but it doesn't seem to work within the instant gallery plugin wp.tutsplus.com/tutorials/plugins/…
    – pepe
    Nov 16, 2012 at 14:05
  • I just want the main image to have dynamic height, but it creates a fixed width and height image to be replaced. If I use the function to remove width and height it works perfectly but masonry stops working fine
    – pepe
    Nov 16, 2012 at 14:08

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" />


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="" />

/* CSS */
.r-img img{
    /* Hide image off-screen on larger devices, but leave it accessible to screen-readers */

/*--- RESPONSIVE ---*/
    /* Remove styling from the div */
.r-img img{
    /* Bring smaller image back into view */

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

That's the only contra with this solution.

  • Could you not use wp_get_attachment_image_src and set the source, width and height of a parent div and child div with background image and hide one from the other based on media queries?
    – Adam
    Nov 15, 2012 at 23:36
  • @userabuser I'm not aware of any technique avoid that an imges src would be loaded. display, visibility both don't help. And as you can see in this test, the images even load when their src is removed (aside from having actually invalid markup and broken img tags). Maybe one could use wp_is_mobile() to avoid the img (or other user agent sniffing tricks), but that wouldn't cover all cases. That would be just an improvement to above answer.
    – kaiser
    Nov 16, 2012 at 1:26
  • 1
    @userabuser Found an interesting idea/addition: "Store the URLs somewhere else, then set all image URLs to some dummy image (empty, transparent, "loading data...", whatever). When an image should be displayed, use JS to set the src attribute and the browser will fetch it."
    – kaiser
    Nov 16, 2012 at 1:28
  • 1
    Funny you mention that, exactly what I did on horizontal theme I Was working on mentioned in chatroom. I did it for lazy loading. You place a 1x1px transparent gif in the src and the real src in a data attribute and detect based on proximity or viewport before swapping out. So your suggestion/idea does work, in fact if you go JS route then you can set height/width attributes dynamically too which solves OP issue. Without JS intervention it won't be possible as you previously showed... +1 add this to your answer IMO.
    – Adam
    Nov 16, 2012 at 1:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.