Question

我正在创建一个众所周知的媒体对象的变体，它符合以下标准：

容器元素具有明确的高度设置
所有儿童的身高应以百分比为基础
图像元素应该能够垂直对齐

我正在使用古老的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;
  }

以下是此代码的实用内容：https://jsfiddle.net/v9gf3c9a/

正如我在CSS中的评论所指出的那样，问题是我必须明确设置img的高度，因为它不会考虑基于百分比的高度，因为使用了{{ 1}}和display: table。如果我使用常规display: table-cell值，例如display和block，则inline-block上的百分比可以正常工作。

有没有办法实现这一目标，以便我可以使用img上的百分比，但仍然通过img / vertical-align使用display: table？

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

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

使用display：table / table-cell的基于高度，垂直对齐，基于百分比的img

1 个答案: