用HTML和CSS剪辑图像 [英] Clip images with HTML and CSS
问题描述
我想在144像素x 144像素div元素中显示图像。
图片总是大于144px，所以我想缩放它们。我的意思是，最小的一面会触及div的边缘，从另一面切割一点 - 与信箱相反。
我该怎么做，它可以在像IE这样的旧浏览器上工作吗？
编辑：
更改图像，错，抱歉。
调整图片的大小，以便在div内部没有空格，没有图片
解决了故意阻塞图像的一部分，同时故意保留占用的空间。如果你只是想让图像的一部分看起来没有空间或其他东西，最好的选择是使用 CSS雪碧技术。
下面是一个例子：
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 = '黑箱' >
< div class ='clippedImg'>& nbsp;< / div>
< div>
使用填充和宽度创建您想要的黑盒效果：
.blackBox {
background-color：black;
padding：0 20px;
width：235px;
}
I want to display images in a 144px x 144px div element. Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<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 (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
这篇关于用HTML和CSS剪辑图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
