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

我是网络开发的新手，正在努力构建我的第一个网站。我使用PHP、Jquery和Bootstrap3进行开发。我想在我的网站上添加一个类似Facebook的封面照片上传和重新定位功能，这有点头疼。我已经通过这里和这里的教程成功地实现了所有的功能，但这两个都不是完美的。

在这两个教程中，在保存新的重新定位图像的最后阶段之前，一切都很好。

1. 在第一种方法中，保存时，将图像的新位置、容器div的高度和宽度作为输入，并使用imagecreatetruecolor（$width，$height）；生成新图像；。原始图像将单独保存，如果要再次重新定位，则使用原始图像
2. 在第二种方法中，只需将图像的新位置保存在数据库中，并将其设置为页面加载时（所谓）重新定位的图像的"页边空白顶部"

问题

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

我已经实施了第一种方法，并做了很多更改来满足我的需求。这个问题在Imagur上的这张.gif图片中得到了更好的说明。此外，请参阅我的另一个堆栈溢出问题在php中有效地缩小图像而不损失纵横比或质量，以获得更详细的解释。

我已经挣扎了一个多月，想知道如何有效地裁剪新图像并保存它，使其在所有屏幕尺寸上都保持一致。

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

感谢

div.aspect
{
    width: 75%;
}
div.aspect img
{
    width: 100%;
}