使用HTML和CSS剪辑图像

我想在144px x 144px div元素中显示图像。 图像总是大于144px，所以我想缩放它们。我的意思是，最小的一面会接触到div的边缘，从另一面切下一点——信箱的对面

我如何才能做到这一点，并让它在像IE这样的老浏览器上工作呢

编辑：
更改了图像，第一个是错误的，抱歉。 调整图像大小，使div内没有没有图像的空间

---

在CSS或属性中仅将图像宽度设置为144px。高度将自动缩放。我相当肯定这可以低到IE 6。我不确定是否还有比这更老的问题。

如果我没有看错你的问题，你不是想调整图像的大小，而是想切掉图像的一部分。如果您只想调整图像大小，请按照其他答案进行操作

我能想到的最简单的方法就是实际剪切图像这是添加

，然后使用CSS来放置和调整div的大小，使其颜色与页面的背景颜色匹配，并将其放在图像的前面。CSS示例：

.blockOut {
  position: relative;
  top: -100px;
  left: 100px;
  background-color: white;
  z-index: 2; //this is the important part for putting this div in front of the other one
}

编辑：请注意，由于您添加了一个示例，显示您希望所有边都变黑，因此需要使用单独的div来变黑顶部、每一侧和底部。此外，如果您希望图像的一部分显示出来（如示例中所示），可以使用CSS透明度选项

div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}

正如您在标题中所说，这是为了只显示img的一部分。但是在描述中说你想调整img的大小。决定你自己

故意屏蔽图像的一部分，同时故意占用空间。如果您只想看到图像的一部分，而不需要占用空间或其他任何东西，那么最好的选择是使用

下面是一个例子：

HTML（复制并粘贴到您自己的文件中进行完整测试）：

您可以调整位置编号，以精确获得所需图像的部分和大小

还要注意的是，如果你想在这篇文章周围加一个黑匣子，它甚至比我写的另一篇文章更容易。只需将父级

div

放在这一个周围：

<div class='blackBox'>
    <div class='clippedImg'>&nbsp;</div>
<div>

---

要使用css实现您想要的功能，您应该使用最大高度：144px；最大宽度：144px。但是ie6并没有实现这些简单的属性，所以你必须使用js，你能画一张图片让我们知道你想要什么吗？我想你想要的是一个*效果。不要认为没有js你可以做到这一点*EditedGood的想法，但这将是信箱缩放，需要JavaScript来计算更大的部分。我需要一个JS免费的解决方案。此解决方案不需要javascript。浏览器会自动计算这一点。您也可以设置高度而不是宽度，它也会做同样的事情。我真的不知道你说的“信箱缩放”是什么意思。你的盒子是正方形的。但是看到你的例子我发现你并不是真的按照我的想法。我认为你需要多个div，正如杰弗里·布莱克在他的回答中所建议的那样，只有可见部分是可见的。没有停电。我认为剪辑是这个词，但不确定。背景剪辑会很好，但IE6不知道。请注意，我在所有主流浏览器上都做过类似的事情，回到IE6。不要。我知道你的意思，那不是我需要的。谢谢。之前的例子很糟糕，因为我没有使用真实的图像，所以尺寸都弄乱了。我真的认为这会满足你的要求。试着从现在开始！查看并比较将上述HTML保存到计算机上的本地文件时所看到的内容。您将看到我只选择了要显示的图像的一小部分。Arg！再次调整。在Firebug中玩太多，然后不复制所有的调整，真的会把你搞砸！现在，它将正确设置高度和宽度，这是您想要的关键。唯一的问题是它不会缩放背景图像。我不相信背景图像CSS属性支持缩放。为了支持这一点，您可能必须使用我的其他建议，并将其与HTML的高度/宽度属性（在img元素上）结合起来。这无疑是最干净、最简单的方法。你知道IE6是否支持溢出CSS属性吗？我想调整图像的大小，使最小的一面与遮罩面匹配。在这种情况下，144px.masking是隐藏的，而不是调整大小。我看到你改变了问题。@Jeffrey_Blake根据quirksmode，ie6实现了溢出属性，但在溢出上有一个bug：可见

 .clippedImg {
    background-image: url("http://www.grinderschool.com/images/top_main.jpg");
    background-position: -75px -55px;
 }

<div class='blackBox'>
    <div class='clippedImg'>&nbsp;</div>
<div>

.blackBox {
    background-color: black;
    padding: 0 20px;
    width: 235px;
}