使用 HTML 和 CSS 剪辑图像
Posted
技术标签:
【中文标题】使用 HTML 和 CSS 剪辑图像【英文标题】：Clip images with HTML and CSS 【发布时间】：2011-08-17 13:53:44 【问题描述】：我想在 144px x 144px div 元素中显示图像。 图像总是大于 144px，所以我想缩放它们。我的意思是最小的边会接触到 div 的边缘，从另一边切开一点 - 与信箱相反。
我怎样才能做到这一点并让它在 IE 等旧版浏览器上也能正常工作？
编辑： 换了个图，第一个错了，不好意思。 调整图像大小，使 div 内部没有没有图像的空间
【问题讨论】：
你能画一张图让我们知道你想要做什么 我认为你想要的是Pan and scan* 效果。不要以为没有js就可以做到。 *已编辑 【参考方案1】：My first answer 解决了故意遮挡图像的一部分，同时故意保持空间被占用。如果您只想看到部分图像而没有空间或其他任何内容，最好的选择是使用CSS Sprite techniques。
这是一个例子：
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;
【讨论】：
不要。我知道你的意思，那不是我需要的。不过还是谢谢。 之前的例子很糟糕，因为我没有使用真实的图像，所以尺寸都搞砸了。我真的认为这会满足您的需求。尝试从现在的东西开始！查看grinderschool.com/images/top_main.jpg 并与您将上述HTML 保存到您机器上的本地文件中时看到的内容进行比较。您会看到我只选择了要显示的图像的一小部分。 Arg！再次调整。在 Firebug 中玩太多，然后不复制所有的调整真的会让你一团糟！现在它将正确设置高度和宽度，这是您想要的关键。 唯一的问题是它不会缩放背景图像。 我不相信背景图像 CSS 属性支持缩放。为了支持这一点，您可能必须接受我的其他建议并将其与 HTML 的高度/宽度属性（在 img 元素上）结合起来。【参考方案2】：在 CSS 或属性中仅将图像的宽度设置为 144px。高度会自动缩放。我相当肯定这可以在 IE 6 中运行。我不确定是否有任何比这更早的版本。
【讨论】：
好主意，但这将是信箱缩放，并且需要 javascript 来计算更大的一面。我需要一个无 JS 的解决方案。 没有。此解决方案不需要 javascript。浏览器会自动计算这个。您也可以设置高度而不是宽度，它会做同样的事情。我真的不确定您所说的“信箱缩放”是什么意思。你的盒子是正方形的。 但是在看到您的示例后，我发现您并没有真正遵循我的想法。我认为您需要多个 div，正如 Jeffrey Blake 在他的回答中所建议的那样。【参考方案3】：如果我没看错您的问题，那么您并不是在尝试调整图像的大小，而是实际上切掉了图像的一部分。如果您只想调整图像大小，请按照其他答案进行操作。
我能想到的最简单的实际截取图像的方法是添加<div class='blockOut'>&nbsp;</div>，然后使用 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 透明度选项。
【讨论】：
只有可见部分可见。没有黑屏。我认为剪辑是这个词，但不确定。 background-clip 会很好，但 IE6 不知道。 请注意，我在所有主流浏览器中都做过类似的事情，回到 IE6。【参考方案4】：divheight:114px;width:114px;overflow:hidden;
div imgposition:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;
正如您在标题中所说，这是仅显示部分 img 的遮罩。但在描述中说你想调整img的大小。自己决定
【讨论】：
这无疑是最干净、最简单的方法。不知道IE6是否支持overflow CSS属性？ 我想调整图像的大小，使最小边与蒙版边匹配。在本例中为 144 像素。 遮罩是隐藏的，不是调整大小的。我看到你改变了问题。 @Jeffrey_Blake 根据 quirksmode，ie6 实现了溢出属性，但是在溢出上有一个错误：可见【参考方案5】：要使用 css 做你想做的事，你应该使用 max-height:144px;max-width:144px。但是ie6并没有实现那些简单的属性，所以你必须使用js
【讨论】：
以上是关于使用 HTML 和 CSS 剪辑图像的主要内容，如果未能解决你的问题，请参考以下文章