Crop image in CSS

Question

I created a grid with two columns of images that works great with all landscapes: Link . However, I added a portrait image that throws out the layout, so I would like to “crop” the image so that the height matches the others. I tried to use a negative margin , but this did not affect:

.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

You also need to put some height in the container, if not, it does not know how much it should show what it is in.

You can try something like this.

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

Answer 2

You can trim img as follows:

CSS

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

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

HTML:

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

Working script

EDIT: An alternative solution for a grid with two columns 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 script

Answer 3

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

Your problem is with CSS selectors.

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

corresponds to the image with the portrait culture class.

but this one

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

Corresponds to the image inside the protrait-crop container.

Answer 4

I, here's the full post Like top cropping images

Answer 5

How about this CSS:

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

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

Answer 6

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 by adding some div (better solution): http://jsfiddle.net/yoyb9jn7/

Answer 7

You can use CSS3 to handle this very elegantly in a single div without any additional 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 8

Give it a try. Surround the img mark in an overflow dive with a fixed width and height and apply the width or height depending on its orientation Try this

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

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