Crop a picture with Javascript or CSS?

Question

I have pictures of constant width (i.e. 100px) but with variable height (could be 200px, 130px, ... but height is always >= 100px).

I'm looking for CSS or JavaScript code that can crop the bottom of the picture so that all my pictures will be of size 100x100.

Can this be done, or should I use some PHP (or other server side language) library?

Answer 1

HTML:

<div id="cutter">
  <img src="..." alt=""/>
</div>

CSS:

div#cutter {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

Answer 2

Yes, this can be done using CSS. For example :

<div style="background-image:url('stuff.png');width:100px;height:130px;"></div>