Question

我是网络开发的新手，正在尝试构建我的第一个网站。我使用PHP，Jquery和Bootstrap3进行开发。我想在我的网站上添加一个像封面照片上传和重新定位功能的Faceebook，它有点头痛。我已经通过可用的教程here和here获得了帮助，成功实现了所有功能，但这两个功能并不完美。

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

在第一种方法中，在保存时，图像的新位置，容器div的高度和宽度被视为输入，并使用imagecreatetruecolor（$ width，$ height）;生成新图像。原始图像将单独保存并在您想要重新定位时使用。
在第二种方法中，只需将图像的新位置保存在数据库中，并将其设置为＆＃34; margin-top＆＃34; （页面加载时（所谓的）重新定位的图像。

问题

第一种方法实际上是通过单独保存图像来做得很好。但是，这里的问题是，新图像的尺寸是根据容器div的尺寸设置的。由于我的容器div 响应，因此屏幕尺寸的高度和宽度会有所不同，图像的实际尺寸也会有所不同。这是一场灾难，因为如果您在移动屏幕上裁剪图像，则宽度设置为200px，同一图像将加载到大屏幕上，其中容器宽度接近600px。它会创建一个空白空间。
第二种方法除了使用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%;
}