如何顯示圖像的某個部分？

我目前正在開發一款Rails應用程序，以緩解我在Minecraft遊戲中託管的事件的過程。對於那些你不認識的人，在Minecraft多人遊戲中，每個人都有一個皮膚。這是他們的播放器的外觀，它是一個簡單的*.png文件。玩家的臉部總是處於皮膚的某個位置;我的意思是在某些像素座標。如何顯示圖像的某個部分？

玩家的皮膚在網上託管，所以，例如，要訪問我的皮膚（lachy2901），我會去http://s3.amazonaws.com/MinecraftSkins/lachy2901.png。使用這個，我可以訪問並在我的網頁中嵌入任何特定玩家的皮膚。問題是，我只是想讓它顯得更大一些後才顯示臉部。

我的問題是;是否有可能讓我得到這個皮膚文件，「裁剪」到一定的大小和位置，然後渲染這個，而不改變原始圖像，我不能這樣做，或者不得不存儲我自己的版本？

非常感謝您的寶貴時間和幫助，非常感謝。

來源

2012-06-26 lachy2901

將與設定的高度，並與和'溢出一個div內的圖像：隱藏;位置：相對';然後絕對放置圖像。 – Alxandr

@Alxandr這將如何與縮放工作？有CSS首先縮放圖像，然後div的大小相對於圖像的新大小？ – lachy2901

那麼，在實踐中，你可以用這種技術來實現任何東西（比如縮放，裁剪和拉伸到像圓角那樣更高級的東西）。如果您想縮放圖像，只需縮放圖像（帶有img標籤的css和高度），然後將視口（div）更改爲任何尺寸，以使您看到圖像的「正確」部分。 – Alxandr

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

來源

2012-06-26 07:04:35 Rab

謝謝！如果可以的話，我會+1。 – lachy2901

如何顯示圖像的某個部分？

回答

相關問題