Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

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

http://jsfiddle.net/VV25C/

Resize your browser to see it in action.

share|improve this answer
    
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. –  Anthony Myers Jun 5 '13 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/… –  Anthony Myers Jun 12 '13 at 3:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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