裁剪图像像DIV背景

Question

我开发了一个系统在大电视上显示，对于大学，它显示当前和即将到来的课程。为了确定该类将在哪里，它使用名称+图像的组合。 这个想法是，任何（允许）用户可以添加更多的教室与它的各自的照片。

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

背景位置 css标签用于移动图像大约和背景大小的规模。 一切都很好，直到这里，因为该系统是所有网络开发。

由于JQuery动画的性能问题（我的电脑运行良好，但他们想使用的老式电脑却不是那么好），我不得不从HTML中移出。 我选择了pyhton来完成这项工作。

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

问题，最后; 然而，我还没有设法找到一种方法来正确地将CSS值转换为裁剪X，Y和Scale值，因为它们看起来行为不同。

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

高度：自动将根据规定的宽度包裹图像的高度，没有什么大秘密围绕这一个在这里。

至于“作物”，你可以伪造与隐藏溢出容器的作物，并围绕其移动的图像：

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

，并为CSS：

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

我不知道我是否以正确的方式得到了你的问题，希望它有帮助。