0

我有一个 125x250 的图像，我只需要显示它的 125x125 区域。
我可以通过 CSS 做到这一点吗？如何？

谢谢

4

4 回答 4

6

有 CSSclip属性，但设置起来有点笨拙，正如@edd 在他的回答中指出的那样，它仅适用于绝对和固定定位的图像。

我个人会创建一个 125x125 div，并且根据情况，要么

  • 让图像成为 div 的background-image（您甚至可以使用background-position

  • 将图像放入其中，并给出div overflow: hidden（优点：它仍然是带有 ALT 文本的图像元素）

如果您需要整个内容在文档流中表现得像图像，您可以提供div该display: inline-block属性（旧 IE 不支持）。

于 2010-09-14T11:02:03.167 回答
2

这种技术也称为“精灵”。一篇2004 年的 ALA 文章展示了基础知识，另一个简短的介绍可以在 w3schools (www.w3schools.com/css/css_image_sprites.asp) 上找到。

所以它基本上是一个被定位的父元素relative。子元素具有定义的大小和背景，例如background:url("sprite.png") 0 0;. 要使用精灵的另一部分，例如在另一个子元素中，您可以定义background:url("sprite.png") -125 0;.

于 2010-09-14T11:31:49.867 回答
1

您可以使用 CSS Clip 属性，但设置起来有点繁琐，因为图像和父级需要是绝对定位或固定定位。但是一旦设置它确实工作得很好。

例子：

img 
{
position:absolute;
clip:rect(0px,125px,125px,0px);
}
于 2010-09-14T11:04:11.557 回答
1

把你的形象放进去div

<div style="width: 125px; height: 125px; overflow: hidden;">
    <img src="..." />
</div>
于 2010-09-14T12:30:13.220 回答