4

I have got this image:

image 1

And I want to crop 200px from top and 200px from bottom.

Cropped image:

image 2

I want to do this in CSS.

How can I achieve that?

Haroldo Gondim
  • 7,725
  • 9
  • 43
  • 62
Pavel Jílek
  • 41
  • 1
  • 2
  • 2
    Cropping the top can be done using `position` or `margin` or `background-position` (depending on whether the image is used with `img` tag or as `background-image`) but I don't think you can crop the bottom 200 without knowing the actual height of the image (which makes the code not reusable if the images are of different size). All that said, why are you trying to do this with CSS? – Harry Dec 11 '15 at 16:25

1 Answers1

5

You can use the CSS property called clip. Have a look at the documentation here.

For example:

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
Mike Resoli
  • 1,005
  • 3
  • 14
  • 37
  • 2
    That is definitely not a bad choice but the catch with `clip-path` is that it has very very poor browser support at present (even if we end up using SVG for the path - IE has absolutely no support). Plus CSS `clip` is [deprecated](https://developer.mozilla.org/en/docs/Web/CSS/clip). – Harry Dec 11 '15 at 16:34