0

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

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

background-position css 标签用于移动图像，背景尺寸用于缩放。直到这里一切都很好，因为系统都是网络开发的。

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

我需要为 python 调整这些背景位置和大小，所以它不会显示整个图像。为此，我决定首先使用 PHP 处理图像，对其进行裁剪和调整大小。运气不好，我在网上阅读后设法生成了这个。

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

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

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

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

图片：

4

1 回答 1

0

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

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

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

height: auto 将根据规定的宽度包装图像的高度，这里没有什么大秘密。

至于“裁剪”，您可以使用带有隐藏溢出的容器伪造裁剪，并在其周围移动图像：

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

对于CSS：

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

我不知道我是否以正确的方式回答了您的问题，希望对您有所帮助。

于 2013-02-07T13:12:12.647 回答