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 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.

回答1:

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

回答2:

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

回答3:

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.

回答4:

How about this CSS:

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

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

回答5:

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/

回答6:

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/

回答7:

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>

回答8:

I, here a full post How top crop images