Adjust img Höhe in div mit Anzeige: Tabelle-Zeile

Question

Ich habe eine Anzeige mit Anzeige Tabelle und Tabellenzeile zu Fuß immer unten und mit einer variablen Höhe.
Ich habe ein Bild in der mittleren Div und ich möchte dieses Bild wird angepasst, wenn der Bildschirm zu klein ist.

Zum Beispiel:

CSS

html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    text-align:center; 
} 

HTML

<div style="display:inline-block; height:100%;"> 
<div style="position:relative; display:table; height:100%;"> 
    <div style="position:relative; display:table-row; height:50px; background:#fc0;">header with fixed height</div> 
    <div style="position:relative; display:table-row; height:100%; background:#FFC6C7;"> 
    <img src="https://s32.postimg.org/jhsgkm4o5/nuage_525x350.jpg" style="vertical-align:middle; max-width:100%; max-height:100%; width:auto; height:auto;"> 
    </div> 
    <div style="position:relative; display:table-row; height:1px; background:#CDFFDD;"> 
    footer with variable content<br>can be multiline 
    </div> 
</div> 

https://jsfiddle.net/usualuser/5pd5jmLv/

Im Beispiel, wenn der Wi-Bildschirm dth ist zu klein, das Bild passt seine Breite und Höhe an, aber wenn die Höhe des Bildschirms zu klein ist, habe ich die Bildlaufleiste. Also ich will die Bildlaufleiste nicht, aber ich möchte das Bild kleiner.

Ist es möglich?

Answer 1

Fügen Sie diese unter der Linie in Ihrem Code und versuchen, es increases und decreases Ihre width und height von img nach dem width und height von parent div, aber wenn manuell Sie Ihren Browser die Größe Ihres Bildes wird schrumpfen und es wird nicht aussehen gut wie die Höhe ist auch 100%.

<img src="https://source.unsplash.com/random" style="vertical-align:middle; width:100%; height:100%;">