裁剪图像像DIV背景

Question

我开发了一个系统，可以在大型电视上播放，对于大学来说，它会显示当前和即将开始的课程。为了识别该类的位置，它使用名称+图像的组合。 我们的想法是，任何（允许的）用户都可以使用它的相应照片添加更多教室。

我首先使用JQuery和PHP开发它。用户上传图像，该图像在页面上显示为DIV背景，然后，用户可以调整大小并将图像移动到更适合的位置

background-position css标签用于移动图像， background-size 用于缩放。 在这之前一切都很好，因为系统都是网络开发的。

由于JQuery动画的性能问题，我不得不从HTML转移（在我的计算机上运行得很好，但在他们想要使用的旧版本上运行得不是很好）。 我选择了pyhton来完成这项工作。

我需要调整python的背景位置和大小，因此它不会显示整个图像。为此，我决定首先使用PHP处理图像，裁剪并调整大小。没有太多运气，我在网上阅读后设法生成了这个。

问题，最后; 然而，我仍未设法找到将CSS值正确转换为裁剪X，Y和比例值的方法，因为它们的行为似乎不同。

ps：我打算发布4张图片链接，但不幸的是我不能......

---

编辑以总结我想要做的事情：

将CSS样式的div转换为JPG（或png w / e）图像。 检查评论中的链接我开发的图像调整大小/裁剪的东西。

---

图片：

• 图片显示在屏幕上：http://i.imgur.com/pm8r6q6.png
• 调整图片的用户界面：http://i.imgur.com/FMhDkKQ.png
• 原始图片：http://i.imgur.com/vv4mAFN.jpg
• PHP处理后的图像：http://i.imgur.com/2L1Zsuv.png

Answer 1

使用css调整图像大小的主要概念非常简单。

想象一下，如果您的图像是100x50，并且希望将其重新缩放到77宽度：

.resize-x { width: 77px; height: auto;  }

高度：auto会根据指定的宽度包裹图像的高度，这里没有大的秘密。

对于“裁剪”，您可以使用隐藏溢出的容器伪造裁剪，并围绕它移动图像：

<div class="frame">
   <img class="resize-x" src="myimg.jpg">
</div>

和css：

.frame {
  width: x; height: x;
  overflow: hidden;
}

我不知道我的问题是否正确，希望有所帮助。