我知道這可能是一個難題，我有超過10年的HTML工作，但我找不到解決方案不涉及使用Javascript進行復雜的計算。如何使圖像高度根據其下面的內容大小調整大小，在一個固定大小的容器中
我有一個固定大小的容器分成兩部分，所以容器有一個上半部分和下半部分。上半部分有一個圖像。下半部分有文字。我想要的是圖像和文字佔據了所有可用的空間。如果文字較短，則圖像可用空間更多。如果文字較大，則圖像動態變小。我添加了一些截圖來說明我想要的內容。在所有情況下，它們佔據固定尺寸容器的可用垂直空間的100％。
這裏有一個純CSS的方法
你或許可以嘗試使用display: table-row
https://jsfiddle.net/4h37fv7o/
嘗試和修改文本的長度在底部，看到圖像調整大小。
有一些注意事項，但它的作品。
或者，你可以使用Flexbox的儘管，使用背景圖片：
這是一個優雅的純CSS選項。我也喜歡柔性盒使用 –
謝謝！我最喜歡這種方法，因爲它是純CSS。我通過使用最大寬度並居中圖像來改進它。 – jpatiaga
或者，可能是最簡單的方法是使用JavaScript的element.getBoundingClientRect（）函數。這將需要將您的文本放入其自己的相對分區中，然後應用所述函數來計算完成文本的高度（以像素爲單位）。 由於您使用的是主容器部門的固定尺寸，因此您可以計算並使用圖像的剩餘空間。 這裏可能需要一個或兩個棘手的小算法，例如計算縱橫比以匹配高度屬性。
希望這有助於;我不確定你試圖避免的方法有多複雜。
<head>
<style>
body{
background: #111;
color: #d00;
}
#mainContainerDiv{
top: 20%;
height: 49%;
left: 30%;
width: 40%;
background: #c90;
color: #d00;
position: absolute;
}
#image{
top: 10%;
height: 30%;
left: 30%;
width: 40%;
background: #0d0;
color: #ddd;
position: absolute;
}
#textAtBottom{
bottom: 2%;
/*height: 40%;*/
left: 30%;
width: 40%;
background: #d00;
color: #eee;
padding: 1%;
position: absolute;
}
ABC DEF GHI JKL ABC DEF GHI JKL ABC DEF GHI JKL ABC DEF GHI JKL ABC DEF GHI JKL ABC DEF GHI JKL ABC DEF GHI JKL ABC DEF DEF GHI JKL LOREM存有doradum etsum ichtum的Latinum
<!-- <div id="image"> UNCOMMENT THIS WHEN YOU'RE READY
</div> -->
</div><!-- mainContainerDiv-->
<script>
var a = document.getElementById('mainContainerDiv');
var ar = a.getBoundingClientRect();
alert('Main container element is ' + ar.top + 'pixels from its containing element i.e. <body>');
// alert(' und hauptBeinhalter Unten ist ' + ar.bottom ');
// Bildis niedriger, so Teil ist ' + ar.height-ar.top + 'hoch total');
var e = document.getElementById('textAtBottom');
var x = e.getBoundingClientRect();
alert('Text at Bottom starts ' + x.top + ' vertical pixels down from <body>');
var numm = parseInt(x.top)-parseInt(ar.top);
alert('sooooo, you got '+ numm + ' pixels of space above the text to squeeze in your image!!!');
</script>
帶小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>
您可以使用JS + CSS calc來獲得這種影響。你會想用JS來獲取文本的高度和應用CAL圖像高度讓它擴展appropiatly
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>
這將跟隨響應式設計的原則。給我一點點，我會給你一個工作答案 –
我分心了，但似乎其他用戶提供了非常好的建議。 digitaldouble提供了一個優雅的CSS只使用表或flexboxes解決方案 –