I am using a <table> to lay out some stuff.
table { /** width: 4.0cm; height: 6.472cm; **/ width: 3cm; height: 4.85cm; border: 1mm solid black; font-style: serif; font-size: 8.5pt; border-collapse: collapse;}td.image { padding: 0; text-align: center; height: 1cm;}img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border: 0; margin: 0 auto;}td.description { height: 100%; font-size: 6.5pt; padding: 0.5ex; border-bottom: 0; line-height: 0.85;}<table class="#Class"><tbody><tr><td class="usage">#Usage</td><td class="headerspace" style="width:100%"></td><td class="ap">#AP AP</td></tr><tr><td colspan="3" class="title">#Title</td></tr><tr><td colspan="3" class="subtitle #CSSClass">#Class</td></tr><tr style="height:3cm"><td colspan="3" class="image"><img src="https://i.imgur.com/bhiXsy4.jpeg" /></td></tr><tr><td colspan="3" class="description">#Description</td></tr><tr><td colspan="3" class="footnotes">#Footnotes</td></tr><tbody></table>Full fiddle here.
What I ultimately want is for the <img> to fill the fill width and height of the <td> if possible, limit the height to a specific maximum; and for either dimension to shrink if required to preserve the aspect ratio. Furthermore, the <td class="image"> should shrink vertically if the <td class="description"> pushes it upwards.
It renders like this
The <td class="image"> exceeds its height:1.5cm. I was expecting it to shrink to contain the <img> since the <td class="description"> below it has height:100%.
Why is this not happening?