当高度小于容器时，垂直居中元素；但是当容器高度小于时，使高度为100％

Question

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

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

此图像应有助于阐明所需的行为。 这就是我现在所拥有的，即使最大高度为100％，我也不太理解img为什么会超出其父级

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

不知道您要用标题完成什么， 这是我得到的最接近的信息 。 更新标题的信息，我会看到我还能做些什么。

 *{ 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/