php - Facebook 风格封面照片上传、重新定位、裁剪和保存在 bootstrap 3 中使用 php 和 jquery

Question

我是网络开发的新手，正在尝试建立我的第一个网站。我使用 PHP、Jquery 和 Bootstrap3 进行开发。我想在我的网站上添加一个类似于封面照片上传和重新定位功能的 Faceebook，这让我有点头疼。我已通过可用教程的帮助成功实现了所有功能 here和 here , 但它们都不是完美的。

在这两个教程中，一切正常，直到您保存新的重新定位图像的最后阶段。

1. 在第一种方法中，在保存时，将图像的新位置、容器 div 的高度和宽度作为输入，并使用 imagecreatetruecolor($width, $height); 生成新图像。原始图像单独保存，如果您想再次重新定位，可以使用。
2. 在第二种方法中，只需将图像的新位置保存在数据库中，并在页面加载时将其设置为(所谓的)重新定位图像的“margin-top”。

问题

1. 第一种方法实际上通过单独保存图像做得很好。但是，这里的问题是，新图像的尺寸是根据容器 div 的尺寸设置的。由于我的容器 div 是响应式，因此高度和宽度会因屏幕尺寸而异，图像的实际尺寸也会随之变化。这是一场灾难，因为如果您在移动屏幕上裁剪图像，宽度设置为 200px，并且在大屏幕上加载相同的图像，容器宽度接近 600px。它会创建一个空白区域。
2. 第二种方法是不做任何事情，只是使用 css 定位相同的图像。每次都不必要地加载大尺寸的原始图像。

我已经实现了第一种方法并进行了大量更改以满足我的需要。this 中更好地说明了该问题Imagur 上的 .gif 图像。另请引用我的其他 Stack Overflow 问题 Scale down images effectively without losing aspect ratio or quality in php以获得更详细的解释。

一个多月以来，我一直在努力弄清楚如何有效地裁剪并保存新图像，以便它在所有屏幕尺寸上都保持一致。

我希望有专家能给我一个解决方案，这样我就可以毫不拖延地推出我梦想中的网站。

谢谢

Answer 1

如果屏幕大小发生变化，您不必生成新图像。您可以简单地使用百分比来保持图像的原始纵横比。

您只需将容器设置为您想要的任何宽度，然后不设置高度，并设置一个子 img 来填充容器的整个宽度。图片的高度会自动缩放以保持原来的纵横比:

div.aspect
{
    width: 75%;
}

div.aspect img
{
    width: 100%;
}

JSFiddle