CSS - 显示中的图像：table-cell扩展到父级以外

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

您无法将高度设置为％，任何设置如下的规则都将被忽略，并且将使用图片原始高度。

Answer 2

这只是两个猜测：

尝试添加“display：table-row”行？然后，您可以通过em / px或％每行应用行高和最大高度。

也尝试使用“overflow：hidden;”或者你的行和单元格中的“溢出：无”。

Answer 3

嗯，我现在能做的最好的事情就是把它改成背景图片并使用background-size：contains;，这是一个不完美的解决方案，但比使用javascript更简单。我找不到另一种解决办法。