Crop a picture with Javascript or CSS?

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 b开发者_开发问答ottom 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?

HTML:

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

CSS:

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

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

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

If you only need the image visually cropped, you could set it as the background image of another element by the desired dimensions.

/* CSS */
.imageContainer {
    display: block;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

<!-- HTML -->
<div class="imageContainer" style="background-image: url('path/to/your-image.jpg')"></div>

Try the follwoing:

<div class="cropContainer">
    <img src="yourImageSrc">
</div>

<style>
    .cropContainer{
        overflow:hidden;
        width:100px;
        height:100px;
        display:block;
    }
</style>

You could set the image to be the background of a div which was 100px square. That'd work. Especially if you didn't mind that it just cut the bottom off each time. You could offset the background if you wanted to change where it cut off.

Using the images width/height attributes would scale it, which you don't want. One possibility would be to put each image in a 100x100 div, hiding the overflow. The only problem here is if you have any alt text on the image, it will be cut off.

<div style="width:100px;height:100px;overflow:hidden;>
    <img src="image.jpg">
</div>