响应式网站的服务器端图像大小调整

由 jautem发布于 2020-05-09 07:53:25

我需要一个好主意。我有一个响应式设计的网站。例如，我有一个帖子，而这个帖子有封面照片。如果用户的设备是手机，则我希望加载此图像，例如300 x300。如果是台式设备800x500，则是平板电脑600x400。（大小完全是示例）。但是，不仅有3种尺寸。我有14种不同的尺码。

现在我该怎么办？当我上传这张图片时：为一张图片创建14种不同的尺寸？对于一张图像持有14个文件对我来说没有意义。应该有更好的方法。你有更好的主意吗？我的英语不好。

我是大怪兽

2020-05-09 07:53:25

希望我理解正确，但是通过为每个设备创建单独的布局，您可以确定该设备的图像大小。

它可能看起来像这样：

<!DOCTYPE html>
<html lang="en-US">
 <body>
    <mobilephone>
        <style type="text/css">@media(min-width: 400px){smallheader{display: none;}}</style>
        <img src="Your Image">
    </mobilephone>
    <desktop>
        <style type="text/css">@media(max-width: 400px){smallheader{display: none;}}</style>
    </desktop>
</body>
</html>

Jay

2020-05-09 07:53:25

解决此问题的常用方法是动态生成同一图像的多个大小。您可以将请求的尺寸放入图像URL的查询字符串中，并进行尺寸验证。

通常，这些图像是延迟加载的，因此在有人首次请求时会生成该尺寸。

例：

<img src="http://example.com/img/image.php?file=profile.jpg&size=400x400">

The image.php file would return the contents of existing scaled image file (if it exists) or generate it if it doesn't yet.

jautem

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3119
注册排名
1477