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

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/

Answer 2

I, here a full post How top crop images

Answer 3

You can use CSS3 to handle this very elegantly in a single div without any extra containers :

.portrait-crop {
    width: 300px;
    height: 100px;
    background-size: cover;
    background-position: center;
}

<div class="portrait-crop" style="background: url(https://www.google.ca/images/srpr/logo11w.png);"></div>

Answer 4

How about this CSS:

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

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

Answer 5

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

Your problem is on CSS selectors.

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

matches an image with portrait-crop class.

but this

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

Matches an image inside a protrait-crop container.

Answer 6

You can crop imgs like this:

CSS:

.crop-container {
    width: 200px;
    height: 300px;
    overflow: hidden;
}
.crop-container img {
    margin-top: -100px;
    margin-left: -200px;
}

Adjust the height and width of the container to adjust the dimensions of the cropped img and adjust the amount of negative margin-top and margin-left on the img element itself to choose which part of the image to crop to.

HTML:

<div class="crop-container">
    <img src="some-img"/>
</div>

Working Fiddle

EDIT: Alternative solution for a 2 column grid with fixed height rows:

CSS:

body {
    margin: 0;
}
div.img {
    float: left;
    width: 49%;
    margin: 0.5%;
    height: 100%;
    background-size: cover!important;
    background-repeat: no-repeat!important;
}
div.row {
    height: 300px;
}

HTML:

<div class='row'>
    <div class='img' style='background: url("some-image");'>&nbsp;</div>
    <div class='img' style='background: url("some-other-image");'>&nbsp;</div>
</div>
<div class='row'>
    <div class='img' style='background: url("foo-image");'>&nbsp;</div>
    <div class='img' style='background: url("bar-image");'>&nbsp;</div>
</div>

Working Fiddle