裁剪图像就像一个DIV背景

2024-03-28 16:29:06 发布

您现在位置:Python中文网/ 问答频道 /正文

我开发了一个可以在大电视上显示的系统,对于一所大学来说,它显示当前和即将到来的课程。为了标识该类的位置,它使用name+image组合。 这个想法是,任何(允许的)用户都可以用各自的照片添加更多的教室。在

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

css标记用于移动图像,而用于缩放的背景大小。 在这里之前一切都很好,因为这个系统都是网络开发的。在

因为JQuery动画的性能问题,我不得不放弃HTML(在我的计算机上运行得很好,但在他们想要使用的旧版本上运行得不太好)。 我选择了派顿来做这项工作。在

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

问题,最后; 但是,我仍然没有找到一种方法来正确地将CSS值转换为cropx、Y和Scale值,因为它们的行为似乎不同。在

附言:我本来打算贴4个图片链接来解释,但不幸的是我不能。。。在


编辑以总结我要做的事情:

将CSS样式的div转换为JPG(或png w/e)图像。 查看评论中的链接我开发的图像调整/裁剪功能。在


图片:


Tags: 用户图像comhttppng系统jquerycss
1条回答
网友
1楼 · 发布于 2024-03-28 16:29:06

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

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

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

高度:auto会根据指定的宽度包装图像的高度,这里没有大秘密。在

“你可以用一个隐藏的容器来移动作物,就像一个隐藏的容器一样:

^{pr2}$

对于css:

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

我不知道我对你的问题是否理解正确,希望能有所帮助。在

相关问题 更多 >