在响应式web应用程序中使用动态图像

Question

我在响应式web应用程序上工作。我的设计师在静态页面中使用了370x700px图片。它可以很好地与包含此width:100% height:auto的图像的css和js代码一起响应。

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

还有没有别的办法呢？我应该从管理面板创建370*700px的缩略图吗？

Answer 1

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

它被设计成接受$GET参数，img (数据库中对应于图像的行)，最小，最大，高度，宽度。根据设置的是哪一个，它将固定绝对值或尝试使图像适合您所需的大小。这将允许你上传一张图片，然后为你的页面动态调整大小。

    $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);

Answer 2

您可以编写一个php脚本，它可以动态地调整图像的大小并使用它，如下所示

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