css - 当高度小于容器时垂直居中元素，但当容器高度小于时使高度为 100%

Question

我正在尝试创建一个布局，其中当元素 (.figure) 比其容器 (.timeline-content) 短(高度)时居中对齐。但是当元素比容器长时，我希望元素与其容器具有相同的高度。

容器本身的高度取决于它的父级。

This image should help clarify the desired behavior. 这就是我现在所拥有的，我不太明白为什么 img 会超出其父级，即使它的最大高度:100%

https://jsfiddle.net/kgdkyte4/3/

html{
  position: relative;
}
.timeline-item{
  width: 100%;  
  overflow:hidden
}
.timeline-content{
  width: 50%;
  float: left;
  text-align: right;
}
.timeline-image{
  display:flex;
  align-items: center;
  position:absolute;
  right: 0;
  width: 50%;
  height:100%;
}
.figure{
  width:100%;
  max-height: 100%;
  margin: 0;
  position:relative;
}
img{
  max-height:100%;
  max-width:100%;
  float:left;
}

<div class="timeline-item">
  <div class="timeline-content">
    <h3 class="timeline-title">Blah blah blah
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
      
    </p>
  </div>
  <div class="timeline-image">
    <figure class="figure">
      <img src="http://via.placeholder.com/550x900">
      <figcaption class="figure-caption">blah
      </figcaption>
    </figure>
  </div>
</div>

Answer 1

不知道你想用标题完成什么，this is the closest I've gotten .更新标题上的信息，我会看看我还能做些什么。

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.timeline-item{
  width: 100%;
  position:relative;
}
.timeline-leftbox{
  width:50%;
  text-align:right;
  padding:0 8px;
}

.timeline-rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
  overflow:hidden;
  white-space:nowrap;
}
.timeline-rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.timeline-rightbox img{
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  vertical-align:middle;
}

<div class="timeline-item">
  <div class="timeline-leftbox">
    <div>
      <h3 class="timeline-title">Blah blah blah</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
      </p>
    </div>
  </div>
  <div class="timeline-rightbox">
    <img src="http://via.placeholder.com/550x900" />
  </div>
</div>

---

您可以使用 calc css 在图像下方创建一个标题空间:

https://jsfiddle.net/freer4/r08ujx5p/3/