Question

我有桌面网站，其中我使用大小为500 * 500的图像。我在移动网站上使用相同的图像。

移动设备需要花费大量时间来下载如此大的图像。如果我指定宽度＆amp; <img>中的高度属性，它只是以指定的大小显示它，但它会下载原始图像。

处理它的最佳方法是什么？我无法手动更改所有上千张图片。尺寸和尺寸上传到另一个文件夹。

在css中分配max-width属性可以完成工作吗？

Answer 1

对于您的问题，您可以使用一些JS计算图像高度 - 宽度并相应地创建URL并分配给img标记。

假设在照片目录下的服务器上有一张名为1.jpg的照片

photo.php

<?php
require 'ImageResize.php';

header('Content-Type: image/jpeg');
if(file_exists('photos/'.$_GET['id'].'.jpg')){

    $image = new ResizeImage();
    $image->load('photos/'.$_GET['id'].'.jpg');
    $image->resize($_GET['width'], $_GET['height']); //25-width, 30-height
    $image->output();
}

的index.html

<img src="photo.php?id=1&width=25&height=30"/>

ImageResize.php

http://pastebin.com/mTRqfgMJ

Answer 2

不，max-width属性不会改变任何内容：您的浏览器必须下载src attribut中给出的图像的所有内容才能调整大小。如果你想要一张无大小的图片，你用另一个名字和你想要的尺寸创建它，那么css可以为你做得很好。

<!--Replace...-->
<img src=imgurl>
<!--...by:-->
<span id=someid></span>

然后在样式表中添加：

#someid{
    display: inline-block;
    height: 500px;
    width: 500px;
    background: url(imgurl) no-repeat;
}
/*next lines are gonna apply only if it's a mobile browser (css3)*/
@media handheld{
    #imgurl{
        height: 250px;
        width: 250px;
        background: url(imgurl_resized_250) no-repeat;
    }
}

使用此代码，跨度将以您需要的尺寸显示您的图片 PS：你可以在gogole上找到一些可以帮助你调整图片文件夹大小的应用程序，也许Format Factory可以帮助你吗？

在交付移动网站之前更改图像宽度

2 个答案: