在响应式 Web 应用程序中使用动态图像答案

【问题标题】：Work with dynamic Images in responsive web application在响应式 Web 应用程序中使用动态图像
【发布时间】：2013-06-03 15:55:39
【问题描述】：

我正在开发响应式 Web 应用程序。我的设计师在静态页面中使用了370x700px 图像。它可以完美地与包括 width:100% height:auto 在内的图像的 css 和 js 代码进行响应。

在这个网站上，我正在从管理面板上传产品图片。在没有响应式网站的情况下，我正在创建不同大小的缩略图，但在这种情况下，我担心我应该创建大小为 370x700px 的缩略图吗？这些图像太大而无法加载，我必须在一页上加载 10 张图像。图像的最小大小为 150kb。所以150*10 = 1500kb 仅适用于除其他内容外的图像。这些是小图，大图分辨率约为700x1800px，我将在产品详情页面的缩放部分显示。

还有其他方法吗？我应该从管理面板创建 370*700px 的缩略图吗？

【问题讨论】：

如果这些在静态 html 页面上。然后您可以使用 jquery 库通过 JS 创建缩略图并更改图像。
另一种方法是将所有图像加载为预加载选项

标签： php css responsive-design

【解决方案1】：

这是我编写的一些旧代码，可以调整数据库中任何图像的大小。它仍然使用已弃用的 mysql_*，但这对您来说很容易更新。

它被设计为接受 $GET 参数，img（db 上与图像对应的行），min，max，height，width。根据设置中的哪一个，它会固定一个绝对值或尝试将图像调整到您需要的大小。这将允许您仅上传一张图片，然后为您的页面动态调整其大小。

    $sql=sprintf("SELECT image,filetype,width,height FROM image WHERE imageline='%s'",mysql_real_escape_string($_GET['img']));
$result=mysql_query($sql,$dbh);
$row=mysql_fetch_assoc($result);
$filetype=($row['filetype']!="")?$row['filetype']:"image/jpeg";
$content=base64_decode($row['image']);
$newheight=0;
$newwidth=0;
if($row['height']==0||$row['width']==0)
    {

    header("Content-type: $filetype");
    echo ($content);
    die;
    }

if($_GET['max']>0)
    {
    if($row['height']>=$row['width'])
        {
        $_GET['height']=($_GET['max']>$row['height'])?$row['height']:$_GET['max'];
        $_GET['width']=0;
        }
    if($row['width']>$row['height'])
        {
        $_GET['width']=($_GET['max']>$row['width'])?$row['width']:$_GET['max'];
        $_GET['height']=0;
        }
    }

if($_GET['min']>0)
    {
    if($row['height']<=$row['width'])
        {
        $_GET['height']=$_GET['min'];
        $_GET['width']=0;
        }
    if($row['width']<$row['height'])
        {
        $_GET['width']=$_GET['min'];
        $_GET['height']=0;
        }
    }

if($_GET['height']>0&&$_GET['width']==0)
    {
    $newheight=$_GET['height'];
    $newwidth=$row['width']*($_GET['height']/$row['height']);

    }
if($_GET['height']>0&&$_GET['width']>0)
    {
    $newheight=$_GET['height'];
    $newwidth=$_GET['width'];
    }
if($_GET['width']>0&&$_GET['height']==0)
    {
    $newwidth=$_GET['width'];
    $newheight=$row['height']*($_GET['width']/$row['width']);   
    }

if($newheight>0&&$newwidth>0)
    {
    $newheight=floor($newheight);
    $newwidth=floor($newwidth); 
    $image=imagecreatefromstring($content);
    $newimage=imagecreatetruecolor($newwidth, $newheight);
    imagecopyresampled($newimage, $image, 0, 0, 0, 0, $newwidth, $newheight,$row['width'], $row['height']);
    header("Content-type: image/jpeg");
    imagejpeg($newimage);
    die;
    }
header("Content-type: $filetype");

echo ($content);

【讨论】：

【解决方案2】：

你可以做一个 php 脚本来调整图像的大小并像这样使用它

/image-resizer.php?source=path-to-the-image-here&width=x&height=x

【讨论】：