Javascript 在父div内安装子div

像往常一样，我有一个父和子div。子div的维度不是固定的。单击事件时，我想更改子div的尺寸，使其完全适合父div

注意：这与pdf viewer fit页面功能相同

HTML:

<a href="javascript:void(0)">Click</a>

<div id="parent">
    <div id="child4" class="child"></div>
    <!-- Please check by commenting childs one by one
    <div id="child2" class="child"></div>
    <div id="child3" class="child"></div>
    <div id="child4" class="child"></div>
    -->
</div>

#parent {width:200px; height:100px; margin:100px auto; border:1px solid #000; overflow:auto}
.child {margin:0; border:1px solid #000; background-color:maroon; opacity:0.5}

#child1 {width:100px; height:50px}
#child2 {width:400px; height:100px}
#child3 {width:100px; height:500px}
#child4 {width:400px; height:500px}

$(function(){
    // Fit block
    $("a").click(function(){
        //I want logic here to fit $(".child") div perfectly
        //inside $("#parent") div. After changes dimensions
        //of child should be in proportion to its original width/height.
        //if height is more
        //then it should get parents height and if width is more
        //than it should get parents width but there should be no
        //vertical or horizontal scroll

        $(".child").height($("#parent").height() - 20);
    });
});

JQuery:

<a href="javascript:void(0)">Click</a>

<div id="parent">
    <div id="child4" class="child"></div>
    <!-- Please check by commenting childs one by one
    <div id="child2" class="child"></div>
    <div id="child3" class="child"></div>
    <div id="child4" class="child"></div>
    -->
</div>

#parent {width:200px; height:100px; margin:100px auto; border:1px solid #000; overflow:auto}
.child {margin:0; border:1px solid #000; background-color:maroon; opacity:0.5}

#child1 {width:100px; height:50px}
#child2 {width:400px; height:100px}
#child3 {width:100px; height:500px}
#child4 {width:400px; height:500px}

$(function(){
    // Fit block
    $("a").click(function(){
        //I want logic here to fit $(".child") div perfectly
        //inside $("#parent") div. After changes dimensions
        //of child should be in proportion to its original width/height.
        //if height is more
        //then it should get parents height and if width is more
        //than it should get parents width but there should be no
        //vertical or horizontal scroll

        $(".child").height($("#parent").height() - 20);
    });
});

小提琴-

---

提前感谢。

类似CSS

背景大小：contain有效吗

以下是解决方案：

$(function(){

var $child = $('.child'),     
    h = $child.height(),
    w = $child.width(),
    bw = $child.css('border-width').replace('px',''),
    parH = $('#parent').height(),
    parW = $('#parent').width(),
    car = w / h, 
    par = parW / parH,
    newH,
    newW;

$('a').click(function(){
    if(car > par){
        newW = parW;
        newH = h / w * newW;    
    }else{
         newH = parH;
         newW = w / h * newH;
    }

    $child.width(newW-bw*2);
    $child.height(newH-bw*2);

    console.log(w+'X'+h+' to '+newW+'X'+newH)
});
});

检查此项。
类似于CSS
背景大小：contain有效吗

以下是解决方案：

$(function(){

var $child = $('.child'),     
    h = $child.height(),
    w = $child.width(),
    bw = $child.css('border-width').replace('px',''),
    parH = $('#parent').height(),
    parW = $('#parent').width(),
    car = w / h, 
    par = parW / parH,
    newH,
    newW;

$('a').click(function(){
    if(car > par){
        newW = parW;
        newH = h / w * newW;    
    }else{
         newH = parH;
         newW = w / h * newH;
    }

    $child.width(newW-bw*2);
    $child.height(newH-bw*2);

    console.log(w+'X'+h+' to '+newW+'X'+newH)
});
});

检查此项。
我不希望子div与父div完全相同。如果在水平或垂直方向上子div周围有间隙，则可以。这样newHeight/newWidth=oldHeight/newWidth我不希望子div与父div完全相同。如果子div在水平或垂直方向上有间隙，则可以。例如newHeight/newWidth=oldheath/newWidth对不起，我已经更新了我的答案和小提琴。现在所有4个孩子都可以用了。请检查这把小提琴-。它有你的密码。我唯一改变的是父母的身高。它不适用于child1。我已经更新了答案中的代码，但忘记了小提琴。我们需要比较子对象和父对象的纵横比或对角线。在这里看这个酷。。。我明白你在这里做什么。成功实施。非常感谢。是的，对不起，我已经更新了我的答案。现在所有4个孩子都可以用了。请检查这把小提琴-。它有你的密码。我唯一改变的是父母的身高。它不适用于child1。我已经更新了答案中的代码，但忘记了小提琴。我们需要比较子对象和父对象的纵横比或对角线。在这里看这个酷。。。我明白你在这里做什么。成功实施。谢谢。