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;
}

我想要做的是在＆lt;＆lt; div class =“content”＆gt;即使在调整窗口大小后，图像的高度也会跟随div的高度。可以在不推倒页脚的情况下完成吗？

谢谢！

Answer 1

您可以将此添加到您的css：

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

根据div高度调整img高度

1 个答案: