css - float left 画像のサイズ変更 100% Whit 親

Question

私はウェブサイトのモバイル版に取り組んでいます。あるページの左側に 3 つの画像があり、それをクリックすると右側に大きな画像が表示されます。

ウィンドウのサイズを変更すると、左側の 3 つの画像の解像度が大きくなります。私が達成したいのは、右側の画像が左側の 3 つの画像と同じ高さになるようにすることです。

したがって、ウィンドウのサイズを変更すると、青と緑の div の高さが同じになるはずです。

ここまたは下に私のコードを見つけることができます

<div id="outer">
    <div id="inner1">
        <ul>
            <li>
                <img style="-webkit-user-select: none" src="http://placekitten.com/50/50" />
            </li>
            <li>
                 <img style="-webkit-user-select: none" src="http://placekitten.com/50/50" />
            </li>
            <li>
                  <img style="-webkit-user-select: none" src="http://placekitten.com/50/50" />
            </li>
        </ul>
    </div>
    <div id="inner2">
        <img style="-webkit-user-select: none" src="http://placekitten.com/50/50" />
    </div>
    <div style="clear: both;"></div>
</div>

スタイル

#outer{
    border: 1px solid red;
    width: 100%;
}

#inner1{
    border: 1px solid blue;
    width: 30%;
    float: left;
    margin-right: 20px;
}

#inner1 img{
    width: 100%;
}

#inner2{
    border: 1px solid green;
    width: 100%;
    height: 100%
}

ul{
    list-style-type: none;  
}

ありがとうございました！！