css - 使元素的宽度相对于其高度？

Question

我知道可以相对于其宽度指定元素的高度，因为百分比边距和填充值是相对于其宽度计算的。是否可以做相反的事情 - 相对于高度的宽度？

Answer 1

我找到了一种无需 Javascript 的方法。制作具有比例的图像，并将其嵌入到 HTML 中，并相应地对其进行缩放，以便父元素可以inline-block适合图像大小。

<!-- height of the outer container -->
<div style="height: 200px">

    <!-- this will resize to 200px and maintain its aspect ratio --->
    <div style="display: inline-block; position: relative;">
        <img src="aspectratio.png" style="height: 100%; width: auto;" />
        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
            <!-- Everything in here can party on the fact that their parent
                 has the correct aspect ratio -->
        </div>
    </div>

</div>