CODEWITHSUNDEEP
htmlcssimagerendercrop
lachy2901
lachy2901

Reputation: 68

How to display a certain section of an image?

I am currently working on a rails app, to ease the process of events I host within the game of Minecraft. For those of you who don't know, in Minecraft multiplayer, everyone has a skin. This is what their player looks like, and it is a simple *.png file. The face of a player is always in a certain position in the skin; by that I mean in certain pixel coordinates.

Players' skins are hosted online, so, for example, to access my skin (lachy2901), I would go to http://s3.amazonaws.com/MinecraftSkins/lachy2901.png. Using this, I can access and embed any particular player's skin in my webpage. The problem is, I only want to display the face, after making it a little larger.

My question is; is it possible for me to get this skin file, "crop" it to a certain size and location, and then render this, without changing the original image, which I can't do, or having to store my own versions?

Thank you very much for your time and help, it is greatly appreciated.

Upvotes: 1

Views: 161

Answers (1)

Rab
Rab

Reputation: 35572

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;
}

​

Upvotes: 1

Related Questions