親のdivのサイズ変更可能な画像の高さを設定する

Question

<div style="height: auto"> 
    <img style='position: absolute; left:0; right:0; margin: -115px auto 0; overflow: hidden;' src='img_url' /> 
</div> 

<div style="background: #ea9027; height: 150px;"> 
    etst text 
</div> 

ブラウザのサイズを変更すると、イメージもサイズ変更されています（これは、私が望むもので、高さと幅を特定したくないので、ブラウザ画面の幅の100％）。しかし、ブラウザのサイズを変更すると、2つのdiv間の距離が大きくなります。どうすれば修正できますか？私はこれにjavascriptを使用する必要がありますか？最初のdivのheight:autoは機能しません。

Answer 1

私はJavaScriptを使用してかなり簡単にそれを解決した：

<script> 
    function resize() { 
     var img = document.getElementById('imageId'); 
     document.getElementById("imageIdDiv").style.height = img.clientHeight + "px"; 
    } 
    resize(); 
    window.onresize = function() { 
     resize(); 
    }; 
</script> 

Answer 2

あなたはJavaScriptを使用したくない場合は、あなたは、単にvh: 100%; を使用することができます。これは、CSSでのビューポートの高さのプロパティであり、それは本当に良い作品。