2

皆さん、優しくしてください。私はプロのプログラマーではなく、ただのサイト管理者であり、助けが必要です。これが私の問題です：

私はphpでWebサイトを運営しています。メンバーに写真を見せたいのですが、それらの写真を特定のサイズ制限内にとどめたいので、訪問者が写真全体を見るために水平方向にスクロールする必要はありません。これまでのところ、アップロードする写真のサイズを最小公倍数として 800x600 に制限しています。ただし、より大きなモニターを使用しているユーザーには、より大きな画像を表示できるようにする必要があると考えているため、800x600 の制限を削除する予定ですが、表示される画像が訪問者のビューポートよりも大きくならないようにしたいと考えています (実際には、ビューポートの 2/3 と言います)。

これで、php がサーバー上で実行され、javascript がクライアント上で実行され、viewport のサイズを php コードに渡す簡単な方法がないことを理解しました。

しかし、JQuery や Ajax を使用してそれを行う方法があることも (特にこのサイトで) 読みました。私の主な問題は？Javascript、JQuery、または Ajax でプログラミングする方法がわかりません。私の質問は次のとおりです。プログラムが生成するステートメントでブラウザーの幅を使用するために、クライアントがブラウザーの幅をphpファイルまたはhtmlテンプレートに返すようにするには、phpファイルに正確に何を含める必要がありますか?

この権利を理解していれば、訪問者がページを表示するように要求し、サーバーがページの結果を送信したときに、ブラウザーの幅を返すコードがあるはずです。サーバーは、を使用してページを再送信します。受け取った価値。私はそれで正しいですか？それが機能する方法である場合、そのブラウザの幅の値を取得してphpグローバル変数に保存できると理想的です。これにより、すべてのページが2回生成されるわけではありません。それはできますか？

私が言ったように、私はこれらのことについて初心者です。

言うまでもなく、どんな助けでも大歓迎です。

ご清聴ありがとうございました。

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

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

  3. githubの function.resize.php

  4. 必要な画像 (この場合は 1920x1080の画像です)

これで、コードはほとんど自明です。しかし、物事は時々少し混乱することがあります。ここをクリックして実際の例を見て、これがあなたが探していた解決策であるか教えてください。

私が助けてくれることを願っています！よろしく

于 2012-07-12T06:45:48.737 に答える