1

350px x 350px の div 内に写真を表示しています。人々は写真を私のファイル サーバーにアップロードでき、その写真へのリンク先リンクがデータベースと ID に作成されます。リンクを取得する php ドキュメントはルート フォルダーにあり、すべての画像は pictures というサブフォルダーに保存されます。次のようなものを使用して写真を表示します。

$piclink = "SELECT `link` FROM `pictures` WHERE `id=`.$id.`";

前の$idページからリンクをクリックすると、変数が保存されます。

私の問題:すべての写真が同じ形式であるとは限りません。最大寸法が350px、その他の寸法がプロポーションになるように表示したいです。どうすればいいですか？単純にこれを行う：

echo "<img href=" . $piclink . " height='350px' width='350px'/>"

画像を 350x350 に引き伸ばすため、プロポーションが崩れます。どんな助けでも感謝します。

4

1 に答える 1

1

アスペクト比を維持するために、画像のサイズを取得し、350pxの最大値を使用して比率を適用できます。

次に例を示します。

HTML

<div id="img-holder"></div>

コード

var img = new Image();
img.onload = function () {
    alert('Orignal width:'+img.width+', height:'+img.height);
    var width, height;
    if (img.width > img.height) {
        width = (img.width > 350 ? 350 : img.width);
        height = img.height * (350 / img.width);
    } else {
        height = (img.height > 350 ? 350 : img.height);
        width = img.width * (350 / img.height);
    }
    img.width=width;
    img.height=height;
    $("#img-holder").append(img);
}
img.src = "http://mps.thebeautyquotient.com/images/val4a.jpeg"

これがjsfiddleです：http： //jsfiddle.net/aN6Ec/

于 2013-03-15T01:45:02.130 に答える