基于jQuery resizable（）函数中内部图像的宽度和高度的div宽度和高度

Question

Hi i have a resizable jquery div ,and an image inside this 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/

Here i have to set the image width , div width manually for the initial loading

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

if i didn't use this css then resizable will not work.

But i don't want to do this . Because the uploaded image will become stretched or enlarged because of this manual width and height . Original image dimension will lost.

How can we solve this ?

Answer 1

First, there is lots of useful info here: How to get image size (height & width) using JavaScript?

Please research your issue first before posting.

Second, using the example I offered in the previous question you asked, we can gather this detail by using JavaScript, var img = new Image(); , to create the image object, not in the DOM or Markup, and then get the dimensions from it once it is loaded.

Snippet

  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);

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

Update

If you want to resize the image and retain the ratio, you can do this using a set Width or Height, and calculating a ratio value from that. For example, if you wanted to set the width to 200 pixels:

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

Snippet

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

If your original dimensions were 1536 x 2048, they would result in 200 x 266. Working example: https://jsfiddle.net/Twisty/vd11qyzv/15/

Answer 2

I have made few changes in our code and update js fiddle link is 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{

}