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

    Having an HTML table, how can I toggle between displaying only specific rows using HTML, CSS, and JavaScript [duplicate]

    How to load up CSS files using Javascript?

    How to prevent CSS inline style when Browser Zoom in?

    How to make a ghost element in CSS?

    How to format a button with in Form tag, html?

    how to do a fade in/out while moving down css animation

    How to finish my modal ajax code to work correctly?

    CSS: how to remove the indent of list items shown in Firefox

    How to place HTML elements over inline SVG

    How to have a logo in the middle of two menu lists?

    Beginner: How to get a fixed element to a left position (float left?) - JSFiddle included

    How to force wrapper div to keep its optimal width according to its children

    How to reapply .css file after UpdatePanel asynchronous call completed

    Japanese Text not showing correctly

    how to make target link work giving different css properities

    How to insert a div in between flexbox rows and keep everything responsive?

    How to resize two divs on the click of a link

    How can I add a css property to the first div with a specific class name?

    How do i include font awesome classes in my css file?

    Unordered List Navigation Bar: How to I make some buttons go to the right of the navigation page?

    How to have text slide in when I hover over navbar?

    (HTML/CSS) How to align a text to middle of center (in both x and y axis)? [duplicate]

    How to style a list so that it looks like a table, with various line height?

    How to anchor a dynamic div to the screen?

    How to get the authored style properties of an element?

    How to redirect using css? [duplicate]

    jQuery .animate() sets display:none, how to avoid?

    How to let user change text font and colour in WordPress WSIWYG text editor

    Fuelux, how to fix the width of a repeater column

    How do I align my label to the left of my text input box with CSS?