How to center fluid image and signature using CSS Flexbox?

Question

Please consider the layout where the image and caption of both variable sizes should be centered on the screen.

The layout should behave as follows (see the figure above):

• If the image and signature are small enough to fit the screen, then nothing special happens and they just center.

• If the image and signature do not match the height of the screen, the image becomes compressed until this happens.

• If the image does not match the width of the screen, it becomes compressed until it appears.

How to achieve this mechanics with CSS Flexbox?

Refresh. If the inscription does not fit the screen, the image should be reduced until it appears.

Answer 1

, , .

, Javascript. , @Danield, Javascript .

$figure = $('figure');
$figcaption = $('figcaption');
$img = $('img');

$(window).resize(function() {
  var height = $figure.height() - $figcaption.height();
  $img.css('max-height', Math.max(height, 0));
}).resize();

@import url("//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css");
figure {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
img {
  display: block;
  max-width: 100vw;
}
figcaption {
  flex: none;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <img src="http://lorempixel.com/640/480/fashion" />
  <figcaption>Whatever the foobar,<br>she said</figcaption>
</figure>

Answer 2

:

FIDDLE # 1 ( )

FIDDLE # 2 ( )

FIDDLE # 3 ( )

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 3

- ? - , , .

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

, , , , .

You can see how it lives: http://bekreatief.imtqy.com/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.imtqy.com/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;
    }
  }
}