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

Question

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

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

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

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

那些有相同问题的人或者可能有人可以提供帮助吗？

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

编辑我应该注意，这些是3张不同的图片。

这是JSFiddle！

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

我只需要添加

height: auto;
max-height: 100%;

到图形元素，以完美契合。

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