如何在响应式网站中处理图像内容显示？

Question

我正在建立一个响应式网站的项目。我们遇到的痛苦事情是在不同的显示模式下处理图像的内容。请注意：图片内容。

事情是：在PC视图的几乎每页中，图像都以横向显示，宽度和高度之间的比例很大。现在，当他们将它们带到移动视图时，我们必须在不同的框架中显示它。正如您可能想象的那样，现在图像的内容被缩放和裁剪，然后导出到移动视图上的一些非常奇怪的图像。就像人物几乎在左侧的宽幅画面一样，但是在裁剪之后，图片中只剩下非感觉物体。

恕我直言，通过技术解决方案，我们只处理图像的技术属性（调整大小，缩放），我们无法处理图像内容，这真的是人为问题，对吗？

我正在考虑4个解决方案：

• 1 - 尽管有顾客的感受，我们只是缩放图片（保持 所有内容，只是调整大小）。输出有时会非常 荒谬的我猜是因为调整了风景图片的大小 肖像或方形的。但这主要是最简单的方法。
• 2 - 考虑在移动视图上成像帧大小，并自动裁剪 通过选择图片的中心区域来拍照。如上所述， 毕竟它产生了非感觉画面。
• 3 - 告知客户，每当他们上传图片时，他们必须上传2份副本，1份用于桌面视图，1份用于移动视图，他们肯定负责显示正面的内容。客户需要花费大量精力，但开发更容易。
• 4 - 高级功能：用户只能上传1张图片，我们提供 不同的视口和裁剪器为他们决定图像如何 在裁剪后显示。

我没有太多处理这些东西的经验，也不确定处理这种情况的世界是怎样的。正如我现在所看到的，Wordpress只要求用户只上传1张图片，它会自动缩放它（我的第一个选项）。有没有人有这方面的经验？能否请您分享您的解决方案以及您对我上述解决方案的看法？谢谢。

Answer 1

您可以为他们构建一个简单的Web应用程序来上传图片，并为您的客户提供桌面和移动图片的预览。在php中，有GD库，它很容易用于裁剪和调整大小。