Question

I’m not trying to actually crop the image file. The image has a thick border all around and I just want to somehow hide it. The markup html is this.

<div class="imgDiv">
    <img height="200" width="200" src="http://site.com/image.jpg">
</div>

Is there a way to center or resize this image so that the border is gone?

Answer 1

Sure. Say you want only the center 100×100. You could use this CSS:

.imgDiv {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.imgDiv > img {
    position: relative;
    left: -50px;
    top: -50px;
}

Here I’ve gotten the center 64×64 of your 128×128 avatar using this technique: http://jsfiddle.net/5kHbQ/