JavaScript から画像のサイズを取得し、それらを背景画像として固定の高さ/幅の div に配置することができます。画像がロードされた後、javascript を介して高さと幅を取得できます。
IMG オンロード参照: http://www.w3schools.com/jsref/event_img_onload.asp
これがあなたがすることです
<img onload="redoImage(this)" src="<%=user["pic_big"]%>" id="pic1">
またはjs経由
var img=new Image();
img.onload = redoImage();
img.src="<%=user["pic_big"]%>";
次に、これは画像が表示される実際の場所であり、画像が正しく表示されるように適切なオフセットを使用して背景画像を設定します。オフセット x またはオフセット y を取得する方法を理解するには、いくつかの計算が必要です。
<div id="pic1-holder" style="width:120px; height:120px;"> </div>
function redoImage(this) {
var xOffset = computeXoffset(this.width, 120);
var yOffset = computeYoffset(this.height, 120);
// now set the background image of the div
// and the offset of that background image
};
これを見事に行う製品コードがあります。ハッピーコーディング。