原问题
在css中，计算图像相对于其包含的div的宽度最有效的方法是什么？
我有以下代码片段，将#image1.width设置为相对于其父元素宽度的百分比。我使用百分比，因为我需要在屏幕大小调整时，使图像与其父级按比例缩放。
div {
position: relative;
display: block;
width: 100%;
}
#image1 {
position: absolute;
left: 10%;
top: 10%;
width: 29.43%;
height: auto;
}
#under {
width: 100%;
}<div>
<img id="image1" src="http://placehold.it/206x115">
<img id="under" src="http://placehold.it/700x300/ff00f0/ffffff">
</div>目前它按预期工作，除了我必须手动计算每张图片的宽度百分比。例如：
#image1 dimensions == 206x115
#under dimensions == 700x300
new #image1.width % == #image1.width / #under.width == 206/700 == ~29.43%
我想知道是否有类似calc()方法可以实现以简化/加快这个过程？
我本来打算使用width: calc(100% / 700)，但是当屏幕大小改变时，这显然行不通。
目标
再次强调，#under图像必须根据屏幕大小缩放，而#image保持比例。
我希望自然的图像比例互相保持一致（即一个图像是另一个图像的四分之一大小，在所有浏览器宽度下都应该保持如此）。
注意：为了实现这一点，html可以以任何方式重新配置。
目标浏览器：Chrome、Firefox、Edge。
发放赏金后评审
评价@Obsidian Age的答案（第一轮赏金结束于31.03.17）：
不幸的是,@ Obsidian Age的答案不正确--它接近但不完全正确，我只是想在这里澄清...以下是他的回答中的一段摘录...请注意，我认为这是一个好答案，只是澄清为什么它还没有被接受：
:root {
--width: 90vw; // Must be viewport-driven
}
#image1 {
width: calc(var(--width) / 3); // The 3 can be replaced with any float
}
如果设置--width: 90vw，那么如果body或div设置了max-width会发生什么？考虑到viewport-scaling，这在所有设备上计算起来也非常困难。
#image1 { width:calc(var(--width) / 3); } 这相当于 calc(90vw / 3)，即30vw，它将等于图像宽度的30%。但我们如何计算要除以的数字呢？嗯，回到最初的问题...width:calc(var(--width) * calc(206/700*100)); 这就是为什么我没有接受这个答案的原因。
html。 - Zze