Javascript 以固定尺寸60x60显示部分图像（未知宽度和高度）

我有一个图像，例如

图像的原始尺寸是875 x 583，这里我想用固定高度的单独div显示人脸

我知道脸的尺寸

bottom:456
left:277
right:599
top:134

我想在fixed div 60x60中显示图像的这一部分

我该怎么做

现在我只能用边距显示面部分

<div class="face-img" style="height: 322px; width: 322px;">
  <img src="https://i.stack.imgur.com/zHXcI.png" style="width: 875px; height: 583px; margin: -134px -599px -456px -277px;">
</div>

但我必须给出宽度和高度作为原始尺寸，它们不是固定的

示例JSFIDLE

我有很多这样的图片，我想用不同的维度来展示，所以我对解决这个问题的动态方法更感兴趣

---

谢谢。

您可以使用CSS剪辑来实现图像的裁剪。 您只需将图像包装在容器div中并将clipping属性设置为图像，就可以使用以下代码

HTML代码：

  <div class="container">
   <img src="https://i.stack.imgur.com/zHXcI.png">
  </div>

---

端面的水平尺寸599-277=322 最终水平尺寸=60 水平比=322/60=0.186 图像的最终水平尺寸875*0.186=163

表面的垂直尺寸456-134=322

最终垂直尺寸=60

垂直比=322/60=0.186

图像的最终垂直尺寸583*0.186=108

左位原稿277px 与0.186以上的比率相同 水平位置51px

顶置原稿134px 与0.186以上的比率相同 垂直位置25px

.box{
宽度：60px；
高度：60px；
背景图片：url(https://i.stack.imgur.com/zHXcI.png);
背景尺寸：163px108px；
背景位置：-51px-25px；
背景重复：无重复；
边框：实心1px红色；
}

很抱歉，我忘记输入检查时使用的代码：将css剪辑行更改为：clip:rect（75px、323px、245px、151px）；嘿，你是怎么得出这些值的？你计算过了吗？我正在寻找一种动态的方法来实现这一点，因为我还有其他的图像需要应用这种逻辑

 .container{
  width : 322px;
  height : 322px;
  position : relative;
  display : block;
 }

.container img{
  position : absolute;
  clip: rect(0px,60px,200px,0px);
 }