So I know how to define thumbnail images with set_post_thumbnail_size and it works, but the issue is that the image isn't responsive when I do that, right? When I define the thumbnail to be 300 x 9999, I'm telling the image to always be 300 pixels wide, but I need that image to expand or constrict with it's responsive container. When viewing my project on a desktop, the image containers are floated up next to each other, and need to be around 300 pixels wide. When you view the site on smaller and mobile widths, the image and it's container can actually expand up to 700 pixels because they are no longer floated next to each other, but are stacked up with no floats. I do have max-width:100%; for images in my css by the way. Is there anything I can do? I was going to use this method: http://mobile.smashingmagazine.com/2012/06/14/responsive-images-with-wordress-featured-images/ but still, aren't we just defining image widths that aren't going to be responsive? Plus, just using is_mobile to detect probably isn't perfectly reliable. If I shrink my site down to 700 pixels, it's not necessarily a mobile device, but I will need a different image served up. Ugh

1 Answer 1


What I usually do is:

  • Set an image wrapper with the desired width
  • Set the max-width of the image to the 100% of the wrapper
  • Set the height to auto


Resize your browser to see it in action.

  • Hmm, well I guess another issue that I'm going to have is that I'm using Zurb's Foundation as my, well foundation, of my theme. (foundation.zurb.com/docs/components/grid.html) I'm not really defining the image wrappers' width. Crap. But I certainly do have all images set to max width and height auto. I just need to figure out the wrapper part. Maybe I can experiment with defining widths on the wrappers. I'm thinking it will screw things up though. Jun 5, 2013 at 2:55
  • I guess I should of phrased my question differently. I'm actually going for an adaptive type of thing with the featured images. Depending on what the width of the browser is, WP would serve up a different size. I tried what apostl3pol answered this question with, but no images will show when they are being called within jquery. stackoverflow.com/questions/16120819/… Jun 12, 2013 at 3:23

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.