css 剪辑图片,用HTML和CSS剪辑图像

I want to display images in a 144px x 144px div element.

Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.

How can I do this and have it work on older browsers like IE as well?

EDIT:

Changed the image, the first was wrong, sorry.

Resize the image so that inside the div there is no space without image

解决方案

My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.

Here's an example:

HTML (copy and paste into your own file for a full test):

.clippedImg {

background-image: url("http://www.grinderschool.com/images/top_main.jpg");

background-position: -75px -55px;

height: 100px;

width: 235px;

}

CSS (this is really the key):

.clippedImg {

background-image: url("http://www.grinderschool.com/images/top_main.jpg");

background-position: -75px -55px;

}

You can adjust the position numbers to get exactly the portion and size of the image that you want.

Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:

With a padding and width set to create the black-box effect you want:

.blackBox {

background-color: black;

padding: 0 20px;

width: 235px;

}