Can HTML or CSS give a cropped effect to image?

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 th开发者_开发百科at the border is gone?

Sure. Say you want only the center 100x100. 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 64x64 of your 128x128 avatar using this technique: http://jsfiddle.net/5kHbQ/

You could do it with css, inline:

<div class="imgDiv" style="width:200px;height:200px;background:url(http://site.com/image.jpg) no-repeat -20px -20px;"></div>

or in css:

.imgDiv{
  width:200px;
  height:200px;
  background:url(http://site.com/image.jpg) no-repeat -20px -20px;
}

Either way, you would remove the <img> node in the html.

Play with the width, height, and the last two values of background.

While not the primary purpose for using them, you can use CSS Sprites to remove the border.

Essentially, you would use div elements defined with the height and width that you desire for the image.

Then, you would set the background-image property to be the url of the image (be careful here, the url of the image is relative to the location of the CSS, so be mindful if you use an external CSS file instead of an inline style attribute).

Finally, you would set the background-position property to offset the image so that it lines up with the div element you defined as the "frame".

Lets say you had 10 pixels of yucky border on the image. The following CSS would hide it from view:

.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { display:block; margin:-10px 0 0 -10px; }

An alternate method would be to use position:

.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { position:relative; top:-10px; left:-10px; }