CSS - 显示图像 :table-cell expands beyond parent

Question

我试图将表格单元格中的图像调整为不大于表格单元格的高度/宽度，但它不起作用。

.wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.2);
  z-index: 8;
}
.container {
  position: fixed;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;

  }
.table {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  background: #eee;
  }
.table .cell {
  display: table-cell;
  }
.table .cell.left {
  width: 240px;
  background: #fff;
  }
.table .cell img {
  max-width: 100%;
  max-height: 100%;
  }

正如您在屏幕截图中看到的那样，我有两个单元格，一个在左侧是白色的，另一个在右侧包含图像。该表在#eee 的背景中，并且是适当的高度/宽度(适合 .container)，但是当图像大于其父单元格并设置 max-height 和 max- 时，单元格会溢出表格高度图像的宽度没有影响 - 它只是调整到原始大小。

HTML

<div class="wrapper">
  <div class="container">
    <div class="table">
      <div class="cell left">
        //white
      </div>
      <div class="cell">
        <img src="" /.
      </div>
    </div>
  </div>

Answer 1

您不能将高度设置为 %，这样设置的任何规则都将被忽略，将使用图片的原始高度。