divでimgの高さをdisplay：table-rowで調整します。

Question

表示テーブルとテーブル行を表示して、フッターが常に下にあり、高さが可変です。
中間のdivに画像を配置しました。画面が小さすぎる場合、この画像を調整します。例えば

：

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/

、画面の場合のwi dthが小さすぎると画像の幅と高さが調整されますが、画面の高さが小さすぎるとスクロールバーが表示されます。 私はスクロールバーを望んでいないが、私は画像を小さくしたい。

可能ですか？

Answer 1

あなたのコード内での行の下にこれを追加してみてください、それincreasesとdecreasesあなたwidthとimgのheightをwidthとparent divのheightによると、しかし、手動でブラウザのサイズを変更すると、あなたのイメージが縮小し、それは見ていないだろう高さも良いです100%です。

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