如何显示图像的某个部分？答案

【问题标题】：How to display a certain section of an image?如何显示图像的某个部分？
【发布时间】：2012-06-27 11:01:23
【问题描述】：

我目前正在开发一个 Rails 应用程序，以简化我在 Minecraft 游戏中主持的活动的过程。对于那些不知道的人，在 Minecraft 多人游戏中，每个人都有自己的皮肤。这就是他们的播放器的样子，它是一个简单的*.png 文件。玩家的脸总是在皮肤中的某个位置；我的意思是在某些像素坐标中。

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

我的问题是；我是否可以获取此皮肤文件，将其“裁剪”到某个大小和位置，然后渲染它，而不更改原始图像，这是我无法做到的，或者必须存储我自己的版本？

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

【问题讨论】：

将图像放置在设置高度的 div 中，并带有 `overflow: hidden;位置：相对';然后绝对定位图像。
@Alxandr 这将如何与缩放一起工作？让 CSS 先缩放图像，然后再缩放 div 相对于图像新大小的大小？
嗯，在实践中，您可以使用这种技术实现几乎任何目标（如缩放、裁剪和拉伸到更高级的东西，如圆角）。如果要缩放图像，只需缩放图像（img 标签上的 css 和高度），然后只需将视口 (div) 更改为任何大小，即可看到图像的“正确”部分。跨度>

标签： html css image render crop

【解决方案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;
}

【讨论】：