Question

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

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

现在，我知道php在服务器上运行并且javascript在客户端上运行，并且没有简单的方法将视口维度传递给php代码，我尝试并且失败了，所以很明显。

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

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

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

毋庸置疑，我们将非常感谢任何帮助。

非常感谢你的关注。

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

Answer 1

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

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

Answer 2

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

我在这里使用了github提供的图像大小调整/缓存脚本，可以将样本图像加载到可用浏览器宽度的80％。

没有多少ado：

的index.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>

resizer.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).'" />';
?>

github

function.resize.php
您想要的图片（in our case it is a 1920x1080 one）

现在代码几乎是自我解释的。但事情有时会让人感到困惑。所以CLICK HERE看到了工作示例并告诉我这是你正在寻找的解决方案吗？

希望我帮忙！问候

我需要根据访客视口调整图片大小

2 个答案: