用HTML和CSS剪辑图像

Question

用HTML和CSS剪辑图像

3

我想在一个144px x 144px的div元素中显示图像。图片总是比144px大，所以我想要对它们进行缩放。我的意思是最小的一边将会接触到div的边缘，从另一边剪切一些 - 相当于没有黑边。如何做到这一点并在旧浏览器（如IE）上正常工作？

编辑：更改了图片，第一张图片不正确，抱歉。调整图像大小，使其在div内没有空白处。 enter image description here

- Francisc

1

你可以画一张图来给我们一个想法，你想要做什么吗？ - samccone

我认为你想要的是平移和缩放效果。我认为没有使用js是无法实现的。*已编辑 - TonioElGringo

5个回答

2

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

这是掩盖只显示图像的一部分，正如您在标题中所说。但在描述中，您想要调整图像的大小。自行决定。

- Einacio

这肯定是最简洁和最容易的方法。你知道IE6是否支持溢出CSS属性吗？ - Jeffrey Blake

我想调整图像大小，使最小的一边与掩模边匹配。在这种情况下是144px。 - Francisc

遮罩是隐藏，而不是调整大小。我看到你改变了问题。 - Einacio

根据quirksmode的说法，IE6实现了overflow属性，但在overflow:visible上存在一个bug。@Jeffrey_Blake - Einacio

2

我的第一个回答有意地讨论了有意地遮挡图像的一部分，同时保留空间。如果您只想显示图像的一部分而不占用任何其他空间或内容，则最好的选择是使用CSS Sprite技术。

以下是一个示例：

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'>&nbsp;</div>
</body>
</html>

CSS（这确实是关键）：

 .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;
}

- Jeffrey Blake

不用了，我知道你的意思，但那不是我需要的。还是谢谢你。 - Francisc

之前的示例非常糟糕，因为我没有使用真实的图像，所以尺寸都混乱了。我真的认为这会做到你想要的。试着从现在开始使用已有的内容吧！查看http://www.grinderschool.com/images/top_main.jpg并将其与将上述HTML保存到本地文件时所看到的内容进行比较。您会发现我只选择了图像的一小部分来显示。 - Jeffrey Blake

糟糕！又调整了。在Firebug中玩得太多，然后没有复制所有的调整，真的会让你很困扰！现在它将正确设置高度和宽度，这是你想要的关键。 - Jeffrey Blake

唯一的问题是它无法缩放背景图片。 - Francisc

我不相信在背景图像CSS属性中支持缩放。为了支持它，您可能需要采用我的另一个建议，并将其与HTML的高度/宽度属性（在img元素上）结合使用。 - Jeffrey Blake

2

在CSS或属性中，仅将图像的宽度设置为144px。高度将自动缩放。我相当确定这适用于IE 6及更低版本。我对此之前的版本不确定。

- Cfreak

好主意，但那将是信箱缩放，并且需要JavaScript来计算更大的一侧。我需要一个无需JS的解决方案。 - Francisc

不需要JavaScript即可解决此问题。浏览器会自动计算。您也可以设置高度而不是宽度，效果相同。我真的不确定您所说的“letterbox scaling”是什么意思。您的盒子是正方形。 - Cfreak

但是看了你的例子，我发现你并不是想要我所想的。我认为你需要像Jeffrey Blake在他的回答中建议的那样使用多个<div>元素。 - Cfreak

0

如果您想通过CSS来实现您的需求，您可以使用max-height:144px; max-width:144px这些属性。但是IE6并不支持这些属性，所以您需要使用JS来替代。

- Einacio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeffrey Blake · Accepted Answer

如果我理解您的问题正确，您不是想调整图像大小，而是要实际裁剪图像。如果您只想调整图像大小，请按照其他答案中的建议操作。

我能想到的最简单的方法是添加一个

，然后使用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透明选项。