Search code examples
htmlcssalignmentflexbox

Align images WITH caption with a max-height of container

I am looking for a css-only solution.

I have illustrated my problem in the image below.

  • Black: Parent container with a percentage height
  • White: My image container having this height as his max-height
  • Red: image itself, resizing proportionally and centering vertically
  • Black and grey text: Caption below, sticking at the bottom left corner of the image in ANY variant shown below

Goal

Main problem for me is, letting the text wrap, if it's wider than the image. This was achieved with flexbox, but it's not working the way I want.

Anyone out there having the same problem or may there be someone who can help?

I am aware of many image aligning techniques and that I can solve my problem with JS, but I am looking for a CSS-only-solution.

edit: I should note, that these are 3 different images.

Here is a 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>

Solution

  • Sven from http://maddesigns.de had the answer. Not the ultimate one, but a good answer:

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

    I just needed to add 

    height: auto;
max-height: 100%;

    to the figure-element, to fit perfectly.

    Unfortunately in this solution it is not possible to align the caption to fit the start of the image, BUT in my case, that is acceptable.