Define width of featured image thumbnails, but also make responsive?

Question

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

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.