Image resize or cropped based on the Parent div size

Question

I have div which have 600px width and 631px height initially .

There is two input field where user can change width and height . Inside this div i have an image

so the structure

<div class="container-div">
 <img src="img.jpg" class="new-img">
</div>

so when user resize the div size , image also need to be resize proportionally. It will not be stretched .

How i can do this ?

Note : i wrote the code for to resize the div after user entering their width and height . so i actually try to get code after div resize .

$(".input1, .input2").on("change",function(){
   measurement_change();
});


function measurement_change(){
 after calculation i set new_width and new_height 
 $(".container-div").css("width", new_width);
 $(".container-div").css("height", new_height);

   After this i hav e to resize image propotionally 

}

Please check.

Possible duplicate of https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container — peeebeee, May 19 '18 at 11:54
For example if user enter 100px for height, you want to set width 600px (default) ? so by this, impossible to make an unstretched image. — Pedram, May 19 '18 at 12:30

score 1 · Answer 1 · answered May 19 '18 at 11:58

1

$(".input1, .input2").on("change",function(){
   var width = $('.input1').val();
   var height = $('.input2').val();
   $(".container-div").css("width", width);
   $(".container-div").css("height", height);
   $(".new-img").css("max-width",width);
});

answered May 19 '18 at 11:58

mahi

59
3

$(".new-img").css("max-width",width); is good idea . But i am not sure that this will give the desired result. – Abilash Erikson May 19 '18 at 12:14

Image resize or cropped based on the Parent div size

1 Answers1