web-dev-qa-db-ja.com

高さに応じて幅を設定する

幅に応じた高さの解決策を見ました： cssの高さは幅と同じ 。またはここ： https://stackoverflow.com/a/6615994/2256981 。しかし、私の質問は反対です。

私の要素：

<body>
    <div id="square"></div>
</body>

そのためのスタイル：

body, html {
    margin: 0;
    height: 100%;
    min-height: 300px;
    position: relative;
}
div#square { /* My square. */
    height: 75%; /* It's height depends on ancestor's height. */
    width: 75vh; /* If supported, preliminarily sets it's width. */
    position: absolute; /* Centers it. */
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    background-color: darkorange; /* Makes it visible. */
}

スクリプト、それはそれを正方形に保ちます：

window.onload = window.onresize = function (event) {
    var mySquare = document.getElementById("square");
    mySquare.style.width = mySquare.offsetHeight + 'px';
};

ここに完全なコード： http://jsfiddle.net/je1h/hxkgfr9g/

問題は、純粋なCSSで同じことをすることです。スクリプトはありません。

cssaspect-ratio
11
jevgenij

要素の高さに応じて要素のアスペクト比を維持するために私が知っている2つのテクニックがあります：

高さがビューポートを基準にしている場合：

あなたはvhユニットを使うことができます：

div {
  width: 75vh;
  height: 75vh;
  background:darkorange;
}
<div></div>

親要素の高さに基づく高さの場合：

必要なアスペクト比のダミー画像を使用できます。アスペクト比が1：1の例では、1 * 1の透明な.png画像を使用するか、@ vlgalikのコメントに従って1 * 1のbase64でエンコードされたgifを使用できます。

html,body{
    height:100%;
    margin:0;
    padding:0;
}
#wrap{
    height:75%;
}
#el{
    display:inline-block;
    height:100%;
    background:darkorange;
}
#el img{
    display:block;
    height:100%;
    width:auto;
}
<div id="wrap">
    <div id="el">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    </div>
</div>

この最後のデモはウィンドウのサイズ変更時に更新されないことに注意してください。ただし、アスペクト比はページの読み込み時に維持されます

更新：
で報告されているように コメント 設定display:inline-flex: オン #elウィンドウサイズ変更時の更新の問題を解決しているようです。

11
web-tiki