将元素的宽度相对于其高度？ [英] Make an element's width relative to its height?

问题描述

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

I know that it's possible to specify an element's height relative to its width, because percentage margin and padding values are calculated relative to its width. Is it possible to do the opposite - width relative to height?

推荐答案

我发现了一个没有Javascript的方法。使用比率制作图片，并将其嵌入到HTML中，相应缩放，以便父元素 inline-block 适合图片大小。

I found one way to do this without Javascript. Make an image with the ratio, and embed it into the HTML, scaling it accordingly, so that the parent element can inline-block fit to the image size.

<!-- 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>

这篇关于将元素的宽度相对于其高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！