Javascript 保持子div的纵横比，同时更改父div的高度和宽度

我想创建一个div，该div通过父对象的高度和宽度更改来保持纵横比

在上面的gif中，您可以看到，在更改宽度时，我能够保持box div的纵横比，但在更改父对象的高度时，我无法保持它

.box{
宽度：100px；
背景色：#dfdfdf；
最大宽度：100%；
}
.盒子：之后{
内容：''；
显示：块；
宽度：100%；
身高：100%；
垫底：160%；
}
.wrap9{
宽度：125px；
高度：190px；
}

---

使用默认宽度和高度：

.box{
宽度：100px；
背景色：#dfdfdf；
最大宽度：100%；
最大高度：100%；
}
.盒子：之后{
内容：''；
显示：块；
宽度：100%；
身高：100%；
垫底：160%；
}
.wrap9{
宽度：150px；
高度：200px；
边框：1px纯黑；
}

---

…工作得很完美。

我不得不说，这在目前是不可能的。虽然可以使用

calc（）

和变量，但无法保持对对象当前

宽度
或
高度
的动态引用

当我看到用
js
做这件事时，也没有干净的方法。您只需编写一个间隔来定期检查父元素的宽度或高度是否已更改

谷歌正在推动一项新的规范，但目前规范非常有限

有趣的是，就像在您的示例中一样，默认情况下图像会这样做。但是，对于另一个元素，似乎绝对没有干净的方法可以做到这一点。
您可以使用JavaScript计算对象与父对象之间的宽度和高度的比率。然后可以缩放以填充父对象（想想CSS背景大小：contain；）或缩放以适合父对象（CSS:背景大小：cover；）


两种缩放方法的示例。
（A） 左侧显示按比例填充，（B）右侧使用按比例填充

// Find the ratio between the destination width and source width.
RATIO-X = DESTINATION-WIDTH / SOURCE-WIDTH

// Find the ratio between the destination height and source height.
RATIO-Y = DESTINATION-HEIGHT / SOURCE-HEIGHT

// To use the SCALE TO FILL method, 
// we use the greater of the two ratios, 
// let's assume the RATIO-X is greater than RATIO-Y.
SCALE-W = RATIO-X * SOURCE-WIDTH
SCALE-H = RATIO-X * SOURCE-HEIGHT

// To use the SCALE TO FIT method, 
// we use the lesser of the two ratios, 
// let's assume the RATIO-Y is less than RATIO-X.
SCALE-W = RATIO-Y * SOURCE-WIDTH
SCALE-H = RATIO-Y * SOURCE-HEIGHT

当父对象缩放时，需要确定这些比率

看看嵌入式示例，您可以看到它是如何工作的


var$parent=$（'.parent'），
$child=$（'.child'），
w=$parent.width（），
h=$parent.height（），
cw=$child.width（），
ch=$child.height（），
winc=-10，
hinc=-5；
/*
这个功能正是您所需要的{
首先，我们获取宽度的比率（rx）。
然后是高度的比率（ry）。
要缩放以适应，我们需要两个中的最小值。
要按比例填充，我们需要两个的最大值。
r用于计算子对象的新尺寸。
*/
函数calcChildSize（）{
var rx=w/cw，
ry=h/ch，
r1=数学最小值（rx，ry），
r2=数学最大值（rx，ry）；
$（'.child.fit'）.css({
宽度：r1*cw，
高度：r1*ch
});
$（'.child.fill'）.css({
宽度：r2*cw，
高度：r2*ch
});
}
//只是一个简单的函数来改变大小
//父对象的
setInterval（函数（）{
如果（w<70）{
winc=10；
}如果（w>200），则为其他情况{
winc=-10；
}
如果（h<50）{
hinc=5；
}否则，如果（h>200）{
hinc=-5；
}
w+=winc；
h+=hinc；
$parent.css({
宽度：w，
身高：h
});
calcChildSize（）；
}，100）；
.parent{
显示：内联块；
宽度：200px；
高度：200px；
边框：1px实心#aaa；
右边距：50px；
}
.孩子{
框大小：边框框；
宽度：50px；
高度：70像素；
背景：rgba（0,0,0,0.2）；
边框：1px实心rgba（255,0,0,0.5）；
文本对齐：居中；
字体系列：monospace；
字体大小：11px；
}

适合
填满
添加最大宽度：100%和对象适合度：封面，这里有一个链接


正文{
位置：相对位置；
背景色：小麦；
填充：0；
保证金：0；
}
img{
对象匹配：覆盖；
最大宽度：100%；
宽度：自动；
}
如果您在.box中设置最大高度：100%，您是否获得了想要的效果？我已经尝试过了，但没有效果。请检查我的答案并让我知道。不，我希望box div表现得像图像一样，最大宽度：100%，最大高度：100%。不，请保持box div的纵横比。
// Find the ratio between the destination width and source width.
RATIO-X = DESTINATION-WIDTH / SOURCE-WIDTH

// Find the ratio between the destination height and source height.
RATIO-Y = DESTINATION-HEIGHT / SOURCE-HEIGHT

// To use the SCALE TO FILL method, 
// we use the greater of the two ratios, 
// let's assume the RATIO-X is greater than RATIO-Y.
SCALE-W = RATIO-X * SOURCE-WIDTH
SCALE-H = RATIO-X * SOURCE-HEIGHT

// To use the SCALE TO FIT method, 
// we use the lesser of the two ratios, 
// let's assume the RATIO-Y is less than RATIO-X.
SCALE-W = RATIO-Y * SOURCE-WIDTH
SCALE-H = RATIO-Y * SOURCE-HEIGHT