如何显示图像的某个部分?

时间:2012-06-26 06:49:00

标签: html css image render crop

我目前正在使用rails应用程序,以简化我在Minecraft游戏中托管的事件的过程。对于那些不知道的人,在Minecraft多人游戏中,每个人都有皮肤。这是他们的播放器的样子,它是一个简单的*.png文件。玩家的脸部始终处于皮肤的某个位置;我的意思是在某些像素坐标中。

玩家的皮肤是在线托管的,所以,例如,要访问我的皮肤(lachy2901),我会转到http://s3.amazonaws.com/MinecraftSkins/lachy2901.png。使用它,我可以在我的网页中访问和嵌入任何特定玩家的皮肤。问题是,我只想在将它变大一点之后才显示它。

我的问题是;我有可能获得这个皮肤文件,“裁剪”到一定的大小和位置,然后渲染它,而不更改我不能做的原始图像,或者必须存储我自己的版本?

非常感谢您的时间和帮助,非常感谢。

1 个答案:

答案 0 :(得分:1)

See the Demo

HTML

<div>
<img src="https://www.example.com/logo.png">
</div>​

CSS

div{
width: 100px;
/*height:100px; specify height also if needed*/
overflow: hidden;
border: solid 1px;
}
img{
position: relative;
top: 20px;
left: -20px;
}