divの高さに合わせてimgの高さを調整してください

Question

私のプロジェクトではうまくいくと思っていたfiddleが見つかりました。

HTML：

<div> 
    <header> 
     <div>XXX</div> 
    </header> 
    <main> 
     <div> 
      <div class="content"></div> 
     </div> 
    </main> 
    <footer> 
     <div>YYY</div> 
    </footer> 
</div> 

CSS：私がやりたいこと

html, body, .container, .table { 
    margin: 0; 
    height: 100%; 
} 

.container { 
    background-color: gainsboro; 
} 

.table { 
    display: table; 
    width: 100%; 
} 

.table > div { 
    display: table-row; 
} 

.table > div > div { 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px solid black; 
    overflow: scroll; 
} 

#header,#footer { 
    height: 1px; 
} 

は、画像の高さがのdivのをたどる<のdivクラス= "コンテンツ">内の画像を追加しましたウィンドウのサイズを変更した後でも高さ。フッタを押し下げることなく行えますか？

ありがとうございます！

Answer 1

あなたのCSSにこれを追加することができます。

.content img { 
    max-width: 100%; 
}