根據父級div大小調整圖像大小或裁剪

Question

我的div最初具有600px的寬度和631px的高度。

用戶可以在兩個輸入字段中更改寬度和高度。 在這個div內，我有一張圖片

所以結構

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

因此，當用戶調整div大小時，圖像也需要按比例調整大小 。 它不會被拉伸。

我該怎么做？

注意：在用戶輸入寬度和高度后，我編寫了用於調整div大小的代碼。 所以我實際上嘗試在div調整大小后獲取代碼。

$(".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 

}

請檢查。

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