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.

0

2 Answers 2

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

1
  • thnx.. it worked for me :D
    – test_124
    May 26, 2016 at 17:40
0
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

Or see CSS Display an Image Resized and Cropped

Not the answer you're looking for? Browse other questions tagged or ask your own question.