如何使子元素相对于父元素的维度更小？

Question

当涉及到CSS单元时：

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

我知道%是相对于父元素的。

有没有办法将它们组合在一起，得到一个高度和宽度都相对于父对象较小尺寸的1%的子对象？

我正在寻找一个CSS唯一的解决方案，如果在所有可能的，但如果不可能，那么Javascript解决方案是很好的。

编辑:我基本上想要保持宽高比。我的具体案例如下：

父div大约占据了整个屏幕的80%。子div需要保持正方形(相同的高度和宽度)，因为父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';
};