html - 動的にサイズ変更された画像、相対/絶対配置?

Question

ブラウザ ウィンドウに対して画像の高さを変更するのに深刻な問題があります。幅は問題なく変更されますが、高さは同じままです。高さ: 100% と高さ: 自動、高さ: 100vh を試しましたが、ダイスはありません。私のdivのレイアウト方法と関係があると確信しています。関連するcssは次のとおりです。

.main {
    z-index: 2;
    width: 100%;
    top: 0%;
    height: auto;
    left: 0%;
    position: relative;
    margin-bottom: 300px;
    overflow: hidden;
    }

.container {
    overflow: auto;
    }

.alphaleft {
    background-color: #fff;
    left: 0%;
    top: 0%;
    width: 50%;
    height: 1000px;
    position: relative;
    padding: 0;
    margin: 0;
    z-index: 5;
    float: left;
    }

.alpharight {
    background-color: #fff;
    right: 0%;
    top: 0%;
    width: 50%;
    height: 1000px;
    position: relative;
    padding: 0;
    margin: 0;
    z-index: 5;
    float: right;
    }

.alphaleftimg{
    background: url("images/bg.png") no-repeat;
    background-size: 100%;
    left: 0%;
    top: 20%;
    width: 100%;
    height: auto;
    position: absolute;
    padding: 0;
    margin: 0;
    z-index: 6;
    }

.alpharightimg{
    background: url("images/bg2.png") no-repeat;
    background-size: 100%;
    left: 0%;
    top: 20%;
    width: 100%;
    height: auto;
    position: absolute;
    padding: 0;
    margin: 0;
    z-index: 6;
    }

.floaters {
    clear: both;
    }

投稿の長さを節約するための jsFiddle の私の html は次のとおりです: jsFiddle

私は基本的にページを次のように見せたいです：

画像の高さもブラウザウィンドウに合わせてスケーリングします。

どんな助けでも大歓迎です！ありがとうございました！