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 定位相同的图像。大尺寸的原始图像每次都不必要地加载。

我已经实施了第一种方法，并进行了很多更改以满足我的需求。 Imagur 上的this .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