I'm working on a layout that includes a footer always at the bottom with a variable height. I have placed an image in the center div and I want it to adjust if the screen size is too small.
Here is an example:
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/
In the provided example, the image adjusts its width and height when the screen's width is too small. However, if the screen's height is too small, a scroll bar appears. Is there a way to make the picture smaller instead of having the scroll bar?
Is there a solution for this issue?