Resizing image to fit <td> or div

问题

I want to create the following layout:

where the blue block is an image and the red and green blocks contain vertically centered text. The container needs to have position:fixed, the image is sized dynamically so that its height is set to the height of the container and the red and green boxes are of equal height and fill the remainder of the container horizontally.

I initially tried using divs:

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>

This worked fine for the image but I couldn't figure out how to get the red and green divs to fill the remaining width satisfactorily.

My second attempt was based around tables but, again, I don't seem to be able to get the widths correct:

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>

I have also had problems ensuring that both red and green sections remain at 50% of the total height, regardless of content.

How can I get either of these to work? Or is there a completely different approach that can work?

回答1:

You don't say what your target market is, but since in most my work I only have to worry about the latest browser versions, this answer makes use of the new CSS flexbox. If you need compatibility with older browsers, see the 2nd set of code below.

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

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

Below is a solution that works in older browsers, except IE9 and below where the text will not be properly centered vertically. If that's a concern, you might be able to find something that works on this page, but not knowing all your limitations, I was unable to select the right solution.

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

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

来源：https://stackoverflow.com/questions/34112028/resizing-image-to-fit-td-or-div