Изменение размера или обрезки изображения в зависимости от размера родительского элемента

Question

У меня есть div, который изначально имеет ширину 600 пикселей и высоту 631 пикселей.

Есть два поля ввода, где пользователь может изменять ширину и высоту.Внутри этого 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);
});