How to centre fluid image and a caption using CSS Flexbox?

Question

Please consider a layout where an image and a caption, both of variable dimensions, should be centred on the screen.

Layout should behave like this (consult the figure above):

1. If an image and a caption are small enough to fit the screen, then nothing special happen and they just get centred.

2. If an image and a caption doesn’t fit screen height, an image gets shrunk until they do.

3. If an image doesn’t fit screen width, it gets shrunk until it does.

How to achieve this mechanics using CSS Flexbox?

Update. If the caption doesn't fit the screen, image should shrink until it does.

Answer 1

Here is one way:

FIDDLE #1 (Small image)

FIDDLE #2 (Large width-to-height ratio)

FIDDLE #3 (Large height-to-width ratio)

html,
body {
  margin: 0;
}
.wpr {
  display: flex;
  align-items: center;
  /* align vertical */
  justify-content: center;
  /* align horizontal */
  height: 100vh;
}
figure {
  text-align: center;
}
figcaption {
  width: 350px;
  text-align: left;
  margin: 0 auto;
}
img {
  max-width: 80vw; /* shrink img to viewport */
  max-height: 80vh; /* shrink img to viewport */
}

<div class="wpr">
  <figure>
    <img src="http://placehold.it/150x80" alt="">
    <figcaption>Caption for the awesome picture Caption for the awesome picture Caption for the awesome picture</figcaption>
  </figure>
</div>

Answer 2

Do you mean something like this? - it's only a simple example, but could be what you're looking to achieve.

.container {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

<div class="container">
  <img class="myImg" src="http://placekitten.com/g/200/300" alt="" />

  <div class="caption">I'm a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long caption</div>
</div>

Answer 3

I think I got it working, it does require you to specify if the image is portrait or landscape.

You can see it live her: http://bekreatief.github.io/demo/flexbox_img_with_captions/

<div class="screen">
  <div class="img landscape"><img src="http://fc07.deviantart.net/fs71/f/2014/174/1/7/17a514b56717abed29512fddb462de82-d7nmo0f.png" alt="img_wide" /><span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quibusdam voluptas vel facilis sunt quod consectetur assumenda praesentium perferendis nesciunt.</span></div>
</div>
<div class="screen">
  <div class="img portrait"><img src="http://th01.deviantart.net/fs70/PRE/i/2012/016/0/d/ruffles_version_ii_by_mynimi94-d4mj9fv.png" alt="img_high" /><span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea amet minus architecto quidem ab quisquam id, corrupti suscipit placeat natus neque cum ex enim eveniet quasi facere, eum asperiores distinctio.</span></div>
</div>

Check out the full code here: https://github.com/bekreatief/bekreatief.github.io/tree/master/demo/flexbox_img_with_captions

// Sass
.screen{
  width: 100%;
  position: absolute;
  left: 0;
  height: 100vh;
  box-sizing: border-box;
  @include flexbox(row, wrap, center, center);

  &:nth-of-type(1){
    top: 0;
  }

  &:nth-of-type(2){
    top: 100vh;
  }

  &:nth-of-type(3){
    top: 200vh;
  }

  .img{
    max-width: 100%;
    height: 100vh;
    @include flexbox(column, nowrap, center, center);

    span{
      text-align: left;
    }
  }
  .landscape{
    img{
      max-height: 100vh;
      max-width: 100%;
    }
  }
  .portrait{
    img{
      height: 100vh;
    }
  }
}