javascript - 图像根据父 div 大小调整大小或裁剪

Question

我的 div 初始宽度为 600px，高度为 631px。

有两个输入字段，用户可以在其中更改宽度和高度。在这个 div 里面我有一张图片

这样的结构

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

因此当用户调整 div 大小时，图像也需要按比例调整。它不会被拉伸(stretch)。

我该怎么做？

注意:我编写了在用户输入宽度和高度后调整 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);
});