HTML和CSS

剪辑图片我想在一个144px X 144px div元素来显示图像。图像总是大于144px，所以我想缩放它们。我的意思是，最小的一面会触及div的边缘，从另一面切割 - 与信箱相反。HTML和CSS

我怎么能做到这一点，它的工作对旧的浏览器如IE呢？

编辑：
改变了形象，第一个错了，对不起。调整图像的大小，以便在div里面有没有图像
enter image description here

来源

2011-08-17 Francisc

你能画一个图像给我们一个想法你想要做什么 – samccone

我想你想要的是[平移和扫描] （http://en.wikipedia.org/wiki/Pan_and_scan)*效果。不要以为你可以在没有js的情况下实现这一点。 *编辑 – TonioElGringo

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

随着填充和宽度设置为创建所需的黑箱效应：

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

来源

2011-08-17 14:15:30

不要。我知道你的意思，那不是我需要的。不过谢谢。 – Francisc

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

Arg！再次调整。在Firebug中玩得太多，然后不复制所有的调整真的会让你失望！现在它会正确设置高度和宽度，这是你想要的关键。 –

没有空间CSS或属性只图像的宽度设置为144px。高度将自动缩放。我相当肯定它的工作原理与IE 6一样低。我不确定比这更早的事情。

来源

2011-08-17 14:00:26 Cfreak

好主意，但这将是信箱缩放，它需要JavaScript来计算更大的一面。我需要一个无JS的解决方案。 – Francisc

不需要。此解决方案不需要JavaScript。浏览器自动计算。你也可以设置高度而不是宽度，它会做同样的事情。我真的不确定你的意思是“信箱缩放”。你的盒子是方形的。 – Cfreak

但看到你的例子，我发现你并不是真的追随我的想法。我想你会需要多个div，因为杰弗里布莱克在他的回答中提出了建议。 – Cfreak

如果我看了你的问题的权利，你是不是要调整图像大小，而是真正切断图像的一部分。如果您只是想调整图像大小，请按照其他相关答案。

我能想到的最简单的方法其实切断图像这是添加<div class='blockOut'> </div>，然后用CSS来放置&大小格，使它的颜色匹配您的网页的背景颜色，并把它放在前面图片。例如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透明选项。

来源

2011-08-17 14:04:29

只有可见的部分是可见的。没有黑色。我认为剪裁是这个词，但不知道。背景剪辑会很好，但IE6不知道它。 – Francisc

请注意，我已经在所有主流浏览器中向IE6做过类似的事情。 –

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。决定yuorself

来源

2011-08-17 14:13:45 Einacio

这绝对是最干净和最简单的方法。你碰巧知道IE6是否支持溢出CSS属性？ –

我想调整图像的大小，以便最小的一面与遮罩侧相匹配。在这种情况下144px。 – Francisc

掩蔽隐藏，不调整大小。我看到你改变了这个问题。 – Einacio

做你想要用CSS什么，你应该使用最大高度：144px;最大宽度：144px。但ie6并没有实现这些简单的属性，所以你必须使用js

来源

2011-08-17 15:26:28 Einacio

回答

相关问题