Crop image in CSS

Question

I\'ve created a two-column grid of images, which works fine with all-landscape images: Link. However, I\'ve added a portrait image that throws off the layout, so I\'d like t

Answer 1

How about this CSS:

img { height: 280px; }
.portrait-crop { height: 560px; }

http://jsfiddle.net/91z2wxfy/2/

Answer 2

One possible solution, using only css without affecting your html code is this:

/* Fix for portrait */
.portrait-crop {
     width:50%;
     overflow:hidden;
     height:179px;
     display:inline-block;
 }
 .portrait-crop img {
       width:100%;
       height:auto;
 }

or, adding some div (better solution): http://jsfiddle.net/yoyb9jn7/