不使用浮动使图像填充保持垂直高度

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
div {box-sizing: border-box; color: white;}

img {margin: 0px; padding: 0px; height: 100%; width: 100%;}

h2 {float: left; display: block; padding-bottom: 10px; font: 14px sans-serif; background-color: red; width: 100%; margin: 0px;}

div.left {background-color: black; border-right:solid 5px white; float: left; width: 66.66%; padding: 10px; overflow: auto; }
div.right {background-color: green; border-left:solid 5px white; float: right; width: 33.33%; padding: 10px; overflow: auto;}
</style>

<div class="container" style="width: 100%; background-color: red;">
    
    <div class="left" aspect="2">
         <h2>this a header</h2>
        
         <img src="https://imagesofrmnp.com/images/300/Longs-Illuminated.jpg" width="100%" height="100%" />
        

    </div>
    
    <div class="right" aspect="1">
        <h2>this a header</h2>
         
        <img src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2049807/school-house_1x.png" width="100%" height="100%" />
        
    </div>

</div>


<script type="text/javascript">
     
    
    function FixAspect()
    {
        $("div[aspect]").css("height", function() { return Math.round(this.getBoundingClientRect().width / $(this).attr("aspect")); });
    }
    
    setInterval(FixAspect, 50);
</script><script src="https://ajax.googleapi