当高度小于容器时垂直居中元素，但当容器高度小时高度为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>

---

可以使用计算的CSS创建该图像下的字幕空间：

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