3

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

我怎样才能做到这一点并让它在像 IE 这样的旧浏览器上也能工作？

编辑：
更改了图像，第一个是错误的，对不起。调整图像大小，使 div 内部没有没有图像的空间
在此处输入图像描述

4

5 回答 5

2

在 CSS 或属性中仅将图像的宽度设置为 144px。高度会自动缩放。我相当肯定这可以低至 IE 6。我不确定任何比这更早的东西。

于 2011-08-17T14:00:26.660 回答
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在这个周围放一位父母：

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

使用填充和宽度设置来创建您想要的黑盒效果：

.blackBox {
    background-color: black;
    padding: 0 20px;
    width: 235px;
}
于 2011-08-17T14:15:30.557 回答
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;}

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

于 2011-08-17T14:13:45.103 回答
2

如果我正确地阅读了您的问题，那么您并不是在尝试调整图像的大小，而是实际切断了图像的一部分。如果您只想调整图像大小，请按照其他答案进行操作。

我能想到的实际切断图像的最简单方法是添加<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 透明度选项。

于 2011-08-17T14:04:29.717 回答
0

用 css 做你想做的事，你应该使用 max-height:144px;max-width:144px。但是ie6没有实现那些简单的属性，所以你必须使用js

于 2011-08-17T15:26:28.893 回答