如何使子级相对于父级元素的较小尺寸？

Question

关于CSS单元：

我知道vmin相对于视口较小尺寸的1％。

我知道％是相对于父元素而言的。

有什么方法可以将它们组合在一起，以得到一个高度和宽度相对于父级较小尺寸的1％的孩子？

如果可能的话，我正在寻找仅CSS的解决方案，但如果不可能，那么Javascript解决方案就可以了。

编辑：我基本上想保持宽高比。我的具体情况如下：

父div占据整个屏幕的80％。当父级按比例缩放时，子div需要保持正方形（高度和宽度相同）。但是我希望孩子在保持正方形长宽比的同时尽可能大，所以它的高度和宽度必须是父母较小尺寸的100％。

<div id = 'parent'>
    <div id = 'child'>
    </div>
</div>

查看此图像以得到直观表示：

Answer 1

你可以这样使用：

const size_by_smaller_dim_of = (target_element, source_element, percents = 100) => { // target_el: child, source_el: parent
    let h = Math.min(source_element.getBoundingClientRect().width, source_element.getBoundingClientRect().height);
    target_element.style.width = (h * percents / 100) + 'px';
    target_element.style.height = (h * percents / 100) + 'px';
};