當高度小於容器時垂直居中元素，但當容器高度小時高度爲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/