html - 在不使用 float 的情况下使图像填充剩余的垂直高度

Question

<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="http://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>

您可以看到，通过使用 100% 的高度，图像会溢出，因为标题占据了这 100% 的一部分。所以基本上它必须填满剩余的空间。

我知道我可以用 js 计算 header 占用多少空间，但 css 解决方案会更好。

我尝试 float 标题，但没有帮助。

请注意，不必保留图像的纵横比。

Answer 1

HTML

<div class="container" style="width: 100%; background-color: red;">

    <div class="left" aspect="2">
    </div>

    <div class="right" aspect="1">
        <h2>this a test header</h2>
    </div>

</div>

CSS:

div {box-sizing: border-box; color: white;}

        img {margin: 0px; padding: 0px;}

        div.left {background-color: black; border-right:solid 10px orange; float: left; width: 66.6666%;  }
        div.right {background-color: green; border-left:solid 10px orange; float: right; width: 33.3333%;  overflow: hidden;}
        div.right{

            background-image: url("http://promundoglobal.org/wp-content/uploads/2014/12/images.jpg");
            height: 300px;
            width: 300px;
        }

https://jsfiddle.net/Loeapap1/12/