3

I have a image which I want to crop and then use it accordingly for my project using html/css. I don't want to use any photo editor.

test_124
  • 1,400
  • 2
  • 18
  • 36

2 Answers2

1

here's an example:

<div id="test">
<img id="image" src="LINK to Image">
</div>

and for CSS:

#test{
overflow: hidden;
height: (number)px;
width: (number)px;
}

#image{
position: relative;
top: (number)px;
left: (number)px;
}

so the (position: relative) of the image will allow you to move it with top and left in relation to the div. The height and width of the div will be the crop area.

Hope this helps

0
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

Or see CSS Display an Image Resized and Cropped

Community
  • 1
  • 1
stackunderflow
  • 422
  • 2
  • 5
  • 19