如何使图像高度在固定大小的容器中根据其下面的内容大小进行调整

Question

我理解这可能很难，我有10年以上的HTML工作，但我找不到一个不需要使用Javascript进行复杂计算的解决方案。

我有一个固定大小的容器，分为两个，所以容器有上半部分和下半部分。上半部分有一个图像。下半部分有文字。我想要的是图像和文本占据了所有可用空间。如果文本很短，则可以为图像提供更多空间。如果文本较大，则图像会动态变小。我添加了几个屏幕截图来说明我想要的内容。在所有情况下，它们占据固定尺寸容器可用垂直空间的100％。

Answer 1

这是一个纯粹的CSS方法

您可以尝试使用display: table-row

https://jsfiddle.net/4h37fv7o/

尝试并修改底部文本的长度，并查看图像调整大小。

有一些警告，但它确实有效。

或者，你也可以使用flexbox，使用背景图片：

https://jsfiddle.net/kdm0amsx/1/

Answer 2

使用小js / jquery代码，您可以计算容器和文本的高度，然后调整图像大小！

DEMO： https://jsfiddle.net/L42hguqw/2/

使用JQUERY：

var resizeUI = function(){
        var container = $('.container').eq(0);
        var textFrame = $('.container .textFrame');
        var maxH = container.innerHeight();
        var textH = textFrame.outerHeight();
        $('.container .imageFrame').height(parseInt(maxH-textH,10)).show();
    };

<强>的CSS：

div.container{
    background: #BB0000;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

div.imageFrame{
    max-width: 100%;
    max-height: 100%;
    display: none;
}
div.imageFrame img{
    display: block;
    height: 100%;
}

div.textFrame{
    max-width: 100%;
    max-height: 100%;
    background: #333;
    color: #DDD;
}

<强> HTML：

<div class="container">
    <div class="imageFrame">
        <img src="http://www.conservatoryweb.co.uk/wp-content/uploads/2012/04/iStock_000011293178XSmallPaulMaguire.jpg"/>
    </div>

    <div class="textFrame">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
</div>

Answer 3

您可以使用JS + CSS calc来获得此影响。您将需要使用JS来获取文本的高度并将cal应用于图像高度以使其适当地缩放

calc("100% - " + paragraphHeightVariable + "px - 2em")

2em用于说明段落标记的填充。下面的示例使用jQuery来获取段落高度，但您可以使用vanillajs库来获取它。

$(".container").each(function (a) {
    var $container = $(this);
    var $image = $container.children("img");
    var $p = $container.children("p");
    $image.css("height", "calc(100% - " + $p.height() + "px - 2em)");
    console.log($image.css("height"), $p.height());

});

.container {
    width:400px;
    height:450px;
    background-color:grey;
}
.container p {
    background-color:purple;
}
.container img {
    max-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <img src="http://lorempixel.com/g/400/400/" />
    <p>Hello World!</p>
</div>
<br/>
<div class="container">
    <img src="http://lorempixel.com/g/400/400/" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et mollis leo. Nunc vel finibus tortor. Nam suscipit quam purus, a cursus nulla efficitur non. Integer cursus arcu vel libero blandit efficitur. In at ligula placerat, mattis lacus semper, convallis lorem.
    </p>
</div>
<br/>
<div class="container">
    <img src="http://lorempixel.com/g/400/400/" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et mollis leo. Nunc vel finibus tortor. Nam suscipit quam purus, a cursus nulla efficitur non. Integer cursus arcu vel libero blandit efficitur. In at ligula placerat, mattis lacus semper, convallis lorem.Donec consectetur maximus mauris, egestas sollicitudin nunc imperdiet sit amet. Suspendisse ut consequat magna. In at eros mollis, malesuada arcu sit amet, imperdiet orci. Mauris vitae augue id nisi vulputate ultrices. Morbi a ipsum lacinia arcu consequat sollicitudin ut quis mauris. Quisque est dui, euismod non vestibulum sagittis, varius at elit. Maecenas facilisis tortor eget lorem aliquam, vel consequat lacus egestas. Nam vitae euismod nulla, in condimentum libero. Vivamus eget massa eros.</p>
</div>