将带有标题的图像与容器的最大高度对齐

Question

我正在寻找一个仅限CSS的解决方案 。

我在下图中说明了我的问题。

• 黑色：具有百分比高度的父容器
• 白色：我的图像容器，其高度为最大高度
• 红色：图像本身，按比例调整大小并垂直居中
• 黑色和灰色文本：下面的标题，在下面显示的任何变体中粘贴在图像的左下角

对我来说，主要的问题是，如果文本比图像宽，则让文本换行。 这是通过flexbox实现的，但它并没有按照我想要的方式工作。

那里的人有同样的问题，或者有人可以提供帮助吗？

我知道很多图像对齐技术，我可以用JS解决我的问题，但我正在寻找一个只有CSS的解决方案。

编辑：我应该注意，这些是3个不同的图像。

这是一个JSFiddle ！

 .parent { position: relative; width: 100%; height: 500px; } .other-content { position: absolute; top: 0; left: 0; width: 100%; height: 50%; color: #fff; background: #efefef; } .content-container { position: absolute; height: 50%; width: 100%; bottom: 0; left: 0; background: #000; } .scrollable-content { width: 100%; height: 100%; overflow: auto; } figure { height: 100%; background: #fff; margin: 0 0 20px 0; display: flex; flex: 0 1 auto; flex-direction: row; flex-flow: wrap; justify-content: center; align-items: flex-start; } img { max-height: 100%; max-width: 100%; } figcaption { font-family: Verdana, sans-serif; font-size: 12px; color: #ccc; } .credit { display: block; color: #888; } 

 <div class="parent"> <div class="other-content"> OTHER CONTENT HERE </div> <div class="content-container"> <div class="scrollable-content"> <figure class="img-container"> <img src="http://dummyimage.com/993x993/db0000/fff" alt="Lorem ipsum" /> <figcaption class="caption"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore <span class="credit">At vero eos et accusam</span> </figcaption> </figure> <figure class="img-container"> <img src="http://dummyimage.com/993x200/db0000/fff" alt="Lorem ipsum" /> <figcaption class="caption"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore <span class="credit">At vero eos et accusam</span> </figcaption> </figure> <figure class="img-container"> <img src="http://dummyimage.com/200x993/db0000/fff" alt="Lorem ipsum" /> <figcaption class="caption"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore <span class="credit">At vero eos et accusam</span> </figcaption> </figure> </div> </div> </div> 

Answer 1

来自http://maddesigns.de的 Sven得到了答案。 不是最终的，但一个很好的答案：

http://codepen.io/maddesigns/pen/ZWdQjM

我只需要添加

height: auto;
max-height: 100%;

对于图形元素，要完美贴合。

不幸的是，在这个解决方案中，不能将标题对齐以适合图像的开始，但在我的情况下，这是可以接受的。