我想在 144px x 144px div 元素中显示图像。 图像总是大于 144px，所以我想缩放它们。我的意思是最小的一侧将接触 div 的边缘，从另一侧（与信箱相反）切掉一点。
我怎样才能做到这一点并让它在 IE 等旧版浏览器上也能工作？
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
我的第一个回答 https://stackoverflow.com/questions/7094023/masking-images-with-html-and-css/7094171#7094171解决了故意遮挡图像部分的问题，同时故意保持空间被占用。如果您只想让图像的一部分可见，没有空间或其他任何内容，最好的选择是使用CSS 精灵技术 http://css-tricks.com/158-css-sprites/.
这是一个例子：
HTML（复制并粘贴到您自己的文件中以进行完整测试）：
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS（这确实是关键）：
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
您可以调整位置编号以准确获得所需图像的部分和大小。
另请注意，如果您想要一个黑框，它比我发表的其他帖子更容易。只需放置一个父级div围绕这个：
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
设置填充和宽度以创建您想要的黑盒效果：
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}