I've been making a responsive image thumbnail gallery for a portfolio using this "Tutorial".
This tutorial is quite complete and pedagogic (I'm a big noob), but doesn't cover one part: The tutorial maker uses images that are all in landscape style.
For my portfolio, the thumbnails are going to be alternating both landscape and portrait oriented images.
Using both kinds of orientation gives a sort of an unordered look and feel to the divs, which isn't what I'm going for.
A simple way to solve this would be to manually crop portrait images to fit landscape style. It's kind of an archaic technique I'd rather not resort to.
I realize that another way to do this would be, not to use the img tags, but rather using background-image and background-contain on divs fit to the image box. Something I'd rather not do as it would mean creating a new css class for every thumbnail (I think, not sure)
Someone had the same sort of problem, but he uses jquery to fix it. Since I'm learning css, I think it might be better for me to try and fix this problem using only css.
My major constraint is that I want the page to stay responsive, as well as have my images keep their aspect ratio, so a width:100% and height:100% is out.
If you'd like me to make a fiddle, just ask and you shall be given.
Thanks for reading, hope I made myself clear, English not being my primary language.
EDIT: Here's a fiddle showing how the
<div> and the css are. http://jsfiddle.net/R8B27/ (I suggest resize the "result" box to exactly see how it messes up) L.