调整图像大小以适合或div

Question

我想创建以下布局：

其中蓝色块是图像，红色和绿色块包含垂直居中的文本。容器需要position:fixed，图像的大小是动态调整的，以便其高度设置为容器的高度，红色和绿色框的高度相等，并水平填充容器的其余部分。

我最初尝试使用div：

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
  background-color: red;
}
.imgContainer {
  height: 100%;
  float: left;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
  background-color: yellow;
  text-align: right;
  display: table;
  table-layout: fixed;
  float: right;
}
.row1 {
  height: 50%;
  width: 100%;
  display: table-row;
}
.row2 {
  height: 50%;
  background-color: blue;
  display: table-row;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="imgContainer">
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
  </div>
  <div class="textContainer">
    <div class="row1">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="row2">
      <span>More text.</span>
    </div>
  </div>
</div>

这对于图像效果很好，但我无法弄清楚如何让红色和绿色的div足以令人满意地填充剩余的宽度。

我的第二次尝试是基于表格，但同样，我似乎无法获得正确的宽度：

body {
  background-color: red;
  padding: 0;
  border: 0;
  margin: 0;
}
div {
  background-color: yellow;
  height: 15vh;
  width: 100vw;
  position: fixed;
}
table {
  height: 100%;
  width: 100%;
  background-color: blue;
  border-collapse: collapse;
  table-layout: fixed;
}
tbody {
  height: 100%;
  width: 100%;
  background-color: purple;
}
tr {
  height: 50%;
  width: 100%;
  background-color: green;
  padding: 0;
}
tr:last-child {
  background-color: yellow;
}
td {
  height: 100%;
  padding: 0;
  white-space: nowrap;
}
td:last-child {
  max-width: 100%;
}
img {
  max-height: 100%;
  display: block;
}

<div>
  <table>
    <tbody>
      <tr>
        <td rowspan="2">
          <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </td>
      </tr>
      <tr>
        <td>
          More text.
        </td>
      </tr>
    </tbody>
  </table>
</div>

我也遇到问题，确保红色和绿色部分都保持在总高度的50％，无论内容如何。

我怎样才能让这些中的任何一个起作用？或者有一种完全不同的方法可以起作用吗？

Answer 1

您没有说明您的目标市场是什么，但因为在我的大部分工作中我只需要担心最新的浏览器版本，这个答案会使用新的CSS flexbox。如果您需要与旧版浏览器兼容，请参阅下面的第二组代码。

class MySubClass : Myclass {

    override func myDelegateMethod() {
        // you're not my supervisor
    }   
}

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.imgContainer {
  height: 100%;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
  width: 100%;
}
.row1 {
  background-color: red;
}
.row2 {
  background-color: green;
}
.row1,
.row2 {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

以下是适用于旧版浏览器的解决方案，IE9及更低版本除外，其中文本无法垂直居中。如果这是一个问题，您可能能够找到适用于this page的内容，但不知道所有限制，我无法选择正确的解决方案。

<div class="container">
  <div class="imgContainer">
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
  </div>
  <div class="textContainer">
    <div class="row1">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="row2">
      <span>More text.</span>
    </div>
  </div>
</div>

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
}
.imgContainer {
  height: 100%;
  float: left;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
}
.row1 {
  height: 50%;
  background-color: red;
}
.row2 {
  height: 50%;
  background-color: green;
}
span {
  right: 0;  /* right-justify */
}
.row1 > span {
  position: absolute;
  top: 25%;  /* put the top 25% down within .container - the first non-static ancestor element */
  transform: translateY(-50%);  /* nudge the line up half it's height */
}
.row2 > span {
  position: absolute;
  top: 75%;
  transform: translateY(-50%);
}