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

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:

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:

Working Fiddle