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


Tags: html,css,image,flexbox

Problem :

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

enter image description here

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.

enter image description here



Solution :

Sorry, I really had to pay more attention maintaining this question.

It seems that the problem could not be solved without Javascript. I've started with an idea proposed by @Danield, applied some Javascript and came up with the following solution.

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


    CSS Howto..

    How to push content div to footer div while keeping background in the picture

    How to make menu to slide right on click using HTML and CSS?

    How to position some text?

    CSS frustration: How to center floating images of different widths inside LI tags?

    How can i center the list items inside my unordered list?

    How to set height of my web page in html5

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    HTML/CSS footer on mobile site doesn't work on IPhone safari How to fix?

    How to make a svg-filled background go animating by pure CSS?

    Loop in Sass @for how to use $#{value}#{$i} correctly?

    How to combine several hover elements in JS/Jquery

    How to show the scaled image and text in the view port without scrollbar?

    How to have a DIV appear after you hover over an image/link/another div?

    HTML/CSS: How to create a box for the footer?

    How to add CSS class to body tag in Wordpress using body_class

    CSS and HTML: How to create an Expanding DIV On Click?

    How to make `margin: top;` based on browser height?

    float css only menu - how to modify on section2

    How to align a background image to bottom of table cells in css?

    How to add another line on overflow in a text input?

    How to make the first column of a table invisible?

    How use Append Jquery

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    How to get jQuery UI tabs element panels and set visibility on some of them?

    How can i refer to all of my tags in CSS?

    How to find the proper offsets for CSS sprites?

    How to change the color of item selection radcombobox with a css style?

    How to style Bootstrap menu like a V? [closed]

    How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    jQuery - How to aply custom CSS to fields which are not empty