css - 要素の幅をその高さに対して相対的にしますか?

Question

パーセンテージ マージンとパディングの値は幅に対して相対的に計算されるため、 width に対して相対的に要素の高さを指定できることを私は知っています。高さに対して幅を逆にすることは可能ですか?

Answer 1

Javascriptなしでこれを行う1つの方法を見つけました。比率で画像を作成し、それを 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>