Crop Image In Css

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

Solution 1:

You can crop imgs like this:

CSS:

.crop-container {
    width: 200px;
    height: 300px;
    overflow: hidden;
}
.crop-containerimg {
    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:

<divclass="crop-container"><imgsrc="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:

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

Working Fiddle

Solution 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-cropimg{
    width: 100%;
}

Solution 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;
}

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

Solution 4:

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-cropimg
{
    margin-bottom: -30px;
}

Matches an image inside a protrait-crop container.

Solution 5:

How about this CSS:

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

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