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/

在示例中，如果屏幕的宽度太小，图片会调整其宽度和高度，但如果屏幕的高度太小，我会有滚动条。所以我不想要滚动条，但我希望图片更小。

有可能吗？

Answer 1

在您的代码中添加以下这一行，并根据{{1} increases和decreases width和height img来尝试}和width height，但是当您手动调整浏览器大小时，您的图片会缩小，看起来不太好，因为高度也是parent div。

100%

使用display：table-row调整div中的img height

1 个答案: