根据父级div的大小调整图像大小或裁剪

Question

我有一个div，最初的宽度为600像素，高度为631像素。

现在有两个输入框供用户更改宽度和高度。在这个div里面有一张图片。

因此结构如下：

<div class="container-div">
 <img src="img.jpg" class="new-img">
</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 

}

请检查。

- Abilash Erikson

---

可能是 https://dev59.com/OnA75IYBdhLWcg3w7tx6 的重复问题。 - peeebeee

如果用户将输入框留空了怎么办？ - Pedram

它将采用默认的图像宽度和高度。 - Abilash Erikson

例如，如果用户输入高度为100像素，您想将宽度设置为600像素（默认值）吗？因此，这样做就不可能制作一个未拉伸的图像。 - Pedram

那么我们可以裁剪图片，对吧？ - Abilash Erikson

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

- mahi

---

$(".new-img").css("max-width",width); 是一个好主意。但我不确定这能否达到期望的结果。 - Abilash Erikson