Divの幅と高さjquery resizable（）関数の内側の画像の幅と高さに基づいて

Question

こんにちは、私はサイズ変更可能なjquery divとこのdiv内の画像を持っています。

$(function() { 
 
    var inputLocalFont = document.getElementById("user_file"); 
 
    inputLocalFont.addEventListener("change",previewImages,false); 
 
    function previewImages(){ 
 
    var fileList = this.files; 
 
    var anyWindow = window.URL || window.webkitURL; 
 
    for(var i = 0; i < fileList.length; i++){ 
 
     var objectUrl = anyWindow.createObjectURL(fileList[i]); 
 
     $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>'); 
 
     window.URL.revokeObjectURL(fileList[i]); 
 
    } 
 

 
    $(".img-div").draggable(); 
 
    $(".img-div").resizable(); 
 
    $(".newly-added").on("click", function(e) { 
 
     $(".newly-added").removeClass("img-selected"); 
 
     $(this).addClass("img-selected"); 
 
     e.stopPropagation(); 
 
    }); 
 
    $(document).on("click", function(e) { 
 
     if ($(e.target).is(".newly-added") === false) { 
 
     $(".newly-added").removeClass("img-selected"); 
 
     } 
 
    }); 
 
    } 
 
});

.new-multiple { 
 
    width:400px !important; 
 
    height:400px !important; 
 
    background:white; 
 
    border:2px solid red; 
 
    overflow:hidden; 
 
} 
 
    
 
.img-div { 
 
    width:200px; 
 
    height:200px; 
 
} 
 

 
.newly-added { 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.img-selected{ 
 
    box-shadow: 1px 2px 6px 6px rgb(206, 206, 206); 
 
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 

 
<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file"> 
 
<div class="new-multiple"></div>

https://jsfiddle.net/vd11qyzv/7/

ここで私はこのCSSを使用しなかった場合は、最初のロードのために手動で、

.img-div{ 
    width:200px; 
    height:200px; 
} 
.newly-added{ 
    width:100%; 
    height:100%; 
} 

をdivの幅を画像幅を設定する必要がありますサイズ変更可能ではありません。

しかし、私はこれをしたくありません。 この手動の幅と高さのために、アップロードされた画像が拡大または拡大されるためです。元の画像の寸法が失われます。

どうすればこの問題を解決できますか？

Answer 1

まずあり、便利な情報の多くがここにあります：How to get image size (height & width) using JavaScript?

投稿する前にまず、あなたの問題を調査してください。

第2に、先ほど質問した例を使用して、JavaScriptまたはvar img = new Image();を使用してこの詳細を収集し、DOMまたはマークアップではなく画像オブジェクトを作成し、ロードされます。

スニペット

var imgDim = { 
    width: 0, 
    height: 0 
    }; 
    var newImg = new Image(); 
    $(newImg).attr({ 
    src: objectUrl, 
    id: "img-" + key, 
    class: "newly-added" 
    }).load(function(e) { 
    imgDim.width = this.width; 
    imgDim.height = this.height; 
    $(newImg).appendTo($newDiv).css({ 
     width: imgDim.width + "px", 
     height: imgDim.height + "px" 
    }); 
    }); 
    $(newImg).resizable(); 
    window.URL.revokeObjectURL(val); 

実施例：あなたがイメージのサイズを変更し、比率を保持したい場合は、幅やセットを使用してこれを行うことができます

https://jsfiddle.net/Twisty/vd11qyzv/12/

更新高さを計算し、その値から比の値を計算します。たとえば、あなたが200個のピクセルに幅を設定したい場合：

Nw = 200 
Nh = Ih * (200/Iw) 

スニペット

imgDim.width = 200; 
imgDim.height = Math.floor(this.height * (200/this.width)); 

あなたの元の寸法は1536×2048であれば、彼らは200×266実施例につながります：https://jsfiddle.net/Twisty/vd11qyzv/15/

Answer 2

私は我々のコードにいくつかの変更を加えて、更新JSフィドルリンクはhttps://jsfiddle.net/prashantchaurasia/dksqu2hb/6/

css updated of following classes 
.new-multiple{ 
    width:auto; 
    height:auto; 
    background:white; 
    border:2px solid red; 
    overflow:hidden; 
    display: inline-block; 
} 
.img-div{ 

} 
.newly-added{ 

}