I'm using Types to manage and display images that users upload to the site. I managed to display the grid using my theme's column short code with the table nestled inside each column so the grid itself is responsive but the image in each grid item is not.
Here's an example: http://dev.gearheaddiva.com/community/
The images look great on a full-screen but as you shrink the screen they start to collide with each other and then when the screen size reaches what you normally have with a tablet, the images appear one under the other in a single column and because the image stays the same size you end up with a bunch of empty space on the right.
On a tablet, I'd like the images to occupy the entire space so this means they have enlarge in size to take up the whole content area. Here's my image shortcode in the view:
[types field="meme-image" width="260" height="260" align="none" resize="crop" title="[wpv-post-title]" alt="[wpv-post-title]"][/types]
I think the problem is that I'm specifying a width and height but if I don't then the image appears too large vertically and gets cut off on the right. In other words it doesn't crop properly from the center.
Any suggestions on what I should try?