Question

我有一个高度固定的容器，里面是一个<article>属性display: table;。我希望这个<article>填充他的父级，包括身高和宽度（height: 100%;width: 100%;）。

棘手的部分是这个表有3个孩子：一个页眉和一个页脚，两个都有可变的高度，第三个主要元素应该填充剩余的空间。

问题是，在那个主要元素中，我的高度比主容器大<img>，拉伸表，尽管有height: 100%;（插图在这里：

有没有办法限制img的高度，以免它拉伸桌子？我试了height/max-height: 100%没有运气。

由于代码需要兼容IE9，我无法使用flexbox布局，因此display: table-*方法。

这里是完整代码和代码集，请注意表格如何比其父容器（<section>带红色边框）更大，因为img：http://codepen.io/anon/pen/xGJLLa

HTML

<section>
  <article class="table">
    <header class="row">
        <h2>My header</h2>
    </header>
    <div class="mainrow row">
      <div class="vmiddle">
        <img src="http://lorempixel.com/200/300/abstract/" alt="Myimg" />
      </div>
      <div>
        <p>Lorem ipsum [...]</p>
      </div>
    </div>
    <footer class="row">
      My Footer
    </footer>
  </article>
</section>

CSS

section {
  border: 3px solid red;
  height: 15em;
}

  .table {
    display: table;
    height: 100%;
    width: 100%;
  }
    .row {
      display: table-row;
      vertical-align: middle;
    }

    header { background-color: lightgrey; }
      h2 {
        display: table-cell;
        padding: 0.5em 0;
        vertical-align: middle;
      }

    .mainrow { background-color: lightyellow; }
      .mainrow>div {
        float: left;
        height: 100%;
        width: 50%;
      }
      .vmiddle {
        font-size: 0;
        text-align: center;
      }
      .vmiddle:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
        img {
          max-height: 100%;
          max-width: 100%;
          vertical-align: middle;
        }

    footer { background-color: lightblue; }

由于

防止img伸展显示：table

0 个答案: