アスペクト比を維持しながら、親divに合わせて四角形のdivを拡大します

Question

これは私を狂ってしまいました。純粋なCSSでこれを行う方法があるのだろうかと思います。私がしようとしているのは、固定された高さの親div（紫色）です。その紫色のdivの中で、私はオレンジ色のdivに縦横比を維持し、親divの高さに拡大します。親divのサイズを変更すると、オレンジ色のdivはアスペクト比に応じて拡大縮小されます。

注：イメージまたはパーセントの親の高さなしでこれを行うようにしてください。

を参照してください例：

Answer 1

あなたは、いくつかの簡単なJSでそれを行うことができます。子（または親）の高さを取得して幅を設定するだけです。必要に応じて計算を使用して、必要な比率を得ることができます。

var width = document.getElementById('child').offsetHeight; 
 
document.getElementById('child').style.width = width + 'px';

#parent{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: purple; 
 
} 
 
#child{ 
 
    height: 100%; 
 
    background-color: yellow; 
 
}

<div id="parent"> 
 
    <div id="child"></div> 
 
</div>