html - 基于高度、垂直对齐、基于百分比的 img 使用显示 : table/table-cell

Question

我正在创建满足以下条件的知名媒体对象的变体:

• 容器元素有明确的高度设置
• 所有 child 的高度都应该是基于百分比的
• 图像元素应该能够垂直对齐

我正在使用古老的 display: table/table-cell方法如下:

<div class="o-media">
  <div class="o-media__img">
    <!-- begin picture component -->
    <div class="c-picture">
      <div class="c-picture__container">
        <picture class="c-picture__el">
          <source media="(min-width: 1024px)" srcset="https://www.topoutshoes.com/media/catalog/product/cache/1/image/1200x1200/9df78eab33525d08d6e5fb8d27136e95/_/1/_11_1_7.jpg" class="c-picture__source">
          <img src="http://shopshoeguru.com/sites/default/files/image/shoeguru-banner-red.png" class="c-picture__img _o-media__image--overview-01" alt="Overview 1 photo">
        </picture>
      </div>
    </div>
    <!-- end picture component -->
  </div>

  <div class="o-media__body">
    <!-- some copy and such -->
  </div>
</div>

还有 CSS:

* {
  border: 1px solid red;
}

.o-media {
  height: 550px;
}

  .o-media__body {
    height: 50%;
  }

  .o-media__img {
    height: 50%;
  }

  ._o-media__image--overview-01 {
    /* want to be able to set this using percentage! */
    height: 200px;
  }

.c-picture {
  display: table;
  width: 100%;
  height: 100%;
}

  .c-picture__container {
    display: table-cell;
    vertical-align: middle;
  }

  .c-picture__el {
    display: inline-block;
  }

  .c-picture__source {
    display: none;
  }

  .c-picture__img {
    display: block;
  }

下面是这段代码的 jsfiddle:https://jsfiddle.net/v9gf3c9a/

正如我在 CSS 中的评论所指出的，问题是我必须显式设置 img 的高度，因为它不会考虑基于百分比的高度，因为使用了 display: table和 display: table-cell .如果我使用常规旧版 display值，例如 block和 inline-block , img 上的百分比工作正常。

有什么方法可以实现这一点，以便我可以在 img 上使用百分比, 但仍然使用 vertical-align通过display: table/table-cell ？

Answer 1

这个怎么样:

* {
  border: 1px solid red;
}

.o-media {
  height: 550px;
}

  .o-media__body {
    height: 50%;
  }

  .o-media__img {
    height: 50%;
  }

  ._o-media__image--overview-01 {
    /* want to be able to set this using percentage! */
    height: 100%;
    position: absolute;
  }

.c-picture {
  display: table;
  width: 100%;
  height: 100%;
}

  .c-picture__container {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
  }

  .c-picture__el {
    display: inline-block;
    position: relative;
    height: 80%;
  }

  .c-picture__source {
    display: none;
  }

  .c-picture__img {
    display: block;
    height: 100%;
  }

或者，您可以使用 flexbox，在 flex 容器上使用 align-items: center;。