Selecting just the middle section of an image with CSS

Question

I have an image that has some CSS: width:100%;

Now the image is around 560px high, but I wish to only select 300px of the image, cutting off the top and bottom of the image without squashing it.

Is it possible to do this?

I have looked at crop but you have to select the portions to do this, and so it won't work when trying to get just the middle.

Answer 1

Try this. This is using "clip-path" CSS value. This was mentioned in @Sam Jacob's post.

<style>
.clip-me {  
  position: absolute;
  clip: rect(110px, 160px, 170px, 60px); 
  /* values describe a top/left point and bottom/right point */

  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  /* values are from-top, from-right, from-bottom, from-left */

} 
</style>
<img class="clip-me" src="thing-to-be-clipped.png">

Note: This CSS property does not work in IE.

Answer 2

Put a negative margin-top to your image, the parent will need an overflow: hidden;

Answer 3

You can use clip-path:

/* values are from-top, from-right, from-bottom, from-left */
.clip {
    clip-path: polygon(5% 5%, 80% 5%, 80% 60%, 90% 60%, 5% 60%);
    -webkit-clip-path: polygon(5% 5%, 80% 5%, 80% 60%, 90% 60%, 5% 60%);
}

Here's a jsfiddle example: http://jsfiddle.net/q08g3948/1/

Answer 4

Use Clip Path

img {
    position: absolute;
    clip: rect(0, 100px, 100px, 0); /* clip: shape(top, right, bottom, left);*/
}

Edit: As mentioned in the comment, the position should be absolute or fixed for this to work

If you don't want to make the position absolute or fixed, set the image you want to display as a background in a container (td, div, span etc) and then adjust background-position to get the sprite you want.

As the mozilla page here says that using clip is not a web standard, considering using clip-path or background-position to achieve this.

img{  

  /* deprecated version */
  position: absolute; /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
  /* values descript a top/left point and bottom/right point */

  /* current version (doesn't require positioning) */
  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  /* values are from-top, from-right, from-bottom, from-left */

} 

A detailed explanation here