Css Displaying only center part of image

Question

Is it possible to display only center part of of image. For eg an image height =300 px and width=520px using CSS or JQUERY css would be better if possible else i can use Jquery, Googling didnt helped me

is it possible that i can show only 200 * 130 form the center using css for eg

 -----------------------
|                       |
|       --------        |
|      |Need this|      |
|      | Part    |      |
|       ---------       |
|_______________________|

user_2382115 · Answer

This is now possible using CSS clip propery. For more information see MDN docs

As for example in question asked, code would go:

img {
  position: absolute;
  rect: (50px, 195px, 50px, 195px);

}

Clip needs position: absolute to work so it's probably good idea to put wrap in

(or

or wathever) and set it to position: relative to contain image in document flow

user_12079499 · Answer

This worked better for me.

In style.css or tag.

img {
    width: 100%;
    height: 100px;
    object-fit: fill;
}

Or straight in the HTML.

Css Displaying only center part of image

6 Answers