Image 使用固定的div减小图像大小

我允许用户编辑他们的个人资料图标，以便用户可以调整他们的图标，以显示图像的哪个部分

我有一个固定的

，宽50px，高50px。当用户编辑图标时，将使用此大小。图像将更大，用户可以拖动并设置要显示的内容。在编码部分，我使用了宽度、高度、顶部、左侧。顶部和左侧用于确定要显示的内容。希望您理解

当编辑的图标显示在顶部栏中时，我的问题就出现了。我已将div的宽度设置为30px 30px。当将50px大小转换为30px时，我已从获得的宽度中减去20px，以便按照用户的预期将其放入30px div中。显示图像的实际部分会导致问题，获得的顶部和左侧用于50px div，使用顶部和左侧用于30px div。预期部分不会显示，因为您可以猜到

我想显示用户选择的部件。请检查此JSFIDLE：

我该怎么做

---

谢谢

我想出了一个解决办法：

---

用php将要显示的零件切割成50px，并将切割后的图像缩小到30px。

不确定你得到的是什么。您想允许用户将图像的一个特定块分割出来用作图标，而不仅仅是将整个图像的大小调整到30x30的限制？