2

伙计们，请温柔，我不是专业的程序员，只是一个网站管理员，我需要一些帮助。这是我的问题：

我正在使用 php 运行一个网站。我想向我的成员展示图片，但我希望这些图片保持在特定的大小限制内，这样它们就不会导致访问者水平滚动以查看整个图片。到目前为止，我已将上传图片的大小限制为 800x600 作为最小公分母。但是，我认为应该允许拥有更大显示器的用户看到更大的图片，因此我计划取消 800x600 的限制，但我仍然想确保显示的图像不会大于访问者视口（实际上让我们说 2/3 的视口）。

现在，我知道 php 在服务器上运行而 javascript 在客户端上运行，并且没有简单的方法可以将视口尺寸传递给 php 代码，我尝试过但惨遭失败，所以这很清楚。

但我也读过（尤其是在这个网站上）有一些方法可以做到这一点，使用 JQuery 和/或 Ajax。我的主要问题？我不知道如何用 Javascript、JQuery 或 Ajax 编程。所以我的问题是：为了在我的程序生成的语句中使用浏览器宽度，我应该在我的 php 文件中包含什么以使客户端将浏览器宽度返回给 php 文件或我的 html 模板？

如果我理解这一点，当访问者要求查看页面并且我的服务器将我的页面结果发送给他们时，应该有一些代码会将浏览器宽度发回给我，然后服务器将重新发送页面，使用它收到的价值。我这样做对吗？如果这是它的工作方式，那么如果我可以获取该浏览器宽度值并将其存储在 php 全局变量中，那将是理想的，这样就不会每个页面都生成两次。可以这样做吗？

请非常具体，正如我所说，我是这些事情的新手。

不用说，任何帮助将不胜感激。

非常感谢您的关注。

PS：我已经在我的服务器上下载并安装了 JQuery，但我不知道如何使用它来解决这个问题。

4

2 回答 2

1

尝试style="max-width:100%;"

演示：http: //jsfiddle.net/5HeG2/1/

于 2012-07-11T09:38:19.000 回答
0

我写了这个简单的片段来帮助你开始。正如您所说，您需要根据客户端大小调整图像大小，并且您提到您将寻找与 ajax/jquery 相关的内容。

我在这里使用github提供的图像大小调整/缓存脚本来加载示例图像，最高可达可用浏览器宽度的 80%。

事不宜迟：

  1. 索引.php

    <html>
<head>
    <script>
    function getImg(img){
        if (img==""){
            return;
        }
        width = screen.availWidth;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("img_div").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","resizer.php?i="+img+"&w="+width,true);
        xmlhttp.send();
    }
    </script>
</head>
<body>
    <center>
    <div id="img_div" style="left:0px; top:0px; height: 100%; width:100%;">
            <a href="#" onClick="getImg('xyz.jpg');">Show The Image</a>
    </div>
    </center>
</body>

  2. 大小调整器.php

    <?php
//resizing library
include 'function.resize.php';

$i = $_GET['i'];
$w = $_GET['w'];
echo "Image Requested: ".$i." ; Client's Browser Width: ".$w."px";
$w = 0.8*$w;
echo " ; We will show 80% of width: ".$w."px";
$i_settings['w'] = $w;
echo '<img src="'.resize($i,$i_settings).'" />';
?>

  3. 来自github的function.resize.php

  4. 您想要的图像（在我们的例子中是 1920x1080的图像）

现在代码几乎是不言自明的。但事情有时会变得有点混乱。所以点击这里查看工作示例并告诉我这是您正在寻找的解决方案吗？

希望我有所帮助！问候

于 2012-07-12T06:45:48.737 回答