表的宽度和高度为100％，并且图像与CSS成比例缩放

Question

这个问题的背景是我正在使用HTML到图像转换器，并且使用html作为一种模板。

我的要求是，我需要生成浏览器高度和宽度的100％的布局，可以将主图像按比例缩放到CSS中的可用空间，并关闭某些图像和文本

我的问题是我无法使主图像缩放并按比例填充剩余空间。

我在这里有一个更完整的示例jsFiddle

的HTML

<table>
<thead><tr>
    <td><img class="header_image" src="some.jpg" /></td>
    <td><img class="header_image" src="some.jpg" /></td>
</tr></thead>
<tfoot><tr>
    <td colspan="2"> <span class="text">some text</span></td>
</tr>/tfoot>
<tbody><tr>
    <td colspan="2">
        <img class="main_image" src="main.jpg">
    </td>
</tr></tbody>
</table>

的CSS

 html,body,table {
  margin: 0;
  text-align: center;
  height: 100%;
  width: 100%;
}

.text {
  font-size: 50px;
  font-family: sans-serif;
  letter-spacing: -4px;
  margin: 0 20px;
}

.main_image {
  max-width: 100%;
  max-height: 100%;
}

.header_image {
  width: auto;
  max-width: 100%;
  border: 1px solid black;
  height: auto;
  height: 100px;
}

Answer 1

如果将图像设置在绝对位置，则html表格或flex框将完成此工作：

• 表

 html, body, table { height: 100%; width: 100%; margin: 0; background-color: rgb(148, 0, 211); text-align: center; /* for table */ table-layout: fixed; border-collapse: collapse; } td { padding: 10px; } td.hide {/* do not remove or remove/update also colspan attribute else where */ width: 0; padding:0; overflow: hidden; } img { display: block;/* for the gap*/ margin: auto; } .header_image { height: 100px;/* your example */ } thead tr td, tfoot tr td { height: 0;/* no worry it will expand */ } tbody { position: relative; /* also uses height left avalaible */ } .main_image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-height: 100%; max-width: 100%; } .text { font-size: 50px; font-family: sans-serif; letter-spacing: -4px; margin: 0 20px; } 

 <table> <thead> <tr> <td class="hide"><img class="header_image" src="https://dummyimage.com/400" /></td> <td><img class="header_image" src="https://dummyimage.com/2254x1860" /></td> </tr> </thead> <tfoot> <tr> <td colspan="2"> <span class="text">some text</span></td> </tr> </tfoot> <tbody> <tr> <td colspan="2"> <img class="main_image" src="https://dummyimage.com/1600"> </td> </tr> </tbody> </table> 

• 柔性

 html, body { margin: 0; text-align: center; height: 100%; width: 100%; background-color: rgb(148, 0, 211); display: flex; flex-flow: column; } header,main,footer { padding:10px; } footer { order: 2;/* in case before main in html */ } main { flex: 1;/* use whole space avalaible*/ position:relative; } .hide { display: none; } .text { font-size: 50px; font-family: sans-serif; letter-spacing: -4px; margin: 0 20px; } .main_image { max-height:100%; max-width:100%; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; } .header_image { max-width: 100%; border: 1px solid black; margin: auto; height: 100px; } 

 <header> <div class="hide"><img class="header_image" src="https://dummyimage.com/400" /></div> <div><img class="header_image" src="https://dummyimage.com/2254x1860" /></div> </header> <!--<footer> <span class="text">layed &amp; and pinned with flexbox</span></footer>-- NOP not here --> <main> <img class="main_image" src="https://dummyimage.com/1600"> </main> <footer> <span class="text">layed &amp; and pinned with flexbox</span></footer>