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 to be able to "crop" the image so that the height matches the others'. I tried using a negative margin, but it had no effect:

.portrait-crop
{
    overflow: hidden;
}

img.portrait-crop
{
    margin-bottom: -30px;
}

I'm not sure what I'm doing wrong. Any help would be appreciated.

For reference, this is my code.

Answer 1

Give this a try. Surround the img tag in a dive with a overflow wit fixed width and height and apply a width or height depending on its orientation Try this out

    .overflow{
      overflow: hidden;
      width: 400px;
      height: 271px;   
     }

    .overflow img{
       overflow: hidden;
       width: 400px;
    }

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

Answer 2

You need to put some height to the container also, if not, it doesn't know how much it should show of what it is inside.

You can try something like this.

.portrait-crop{
    display: inline-block;
    height: 215px;
    width: 50%;
    overflow: hidden;
}



.portrait-crop img{
    width: 100%;
}