表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表格或弹性框将完成这项工作：

• 表

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

• flex

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;