title: <img> expand to entire div with keeping ratio
body: <p>I have a gallery slider in bootstrap. It must be RWD so I must use eg. max-height.</p>
  
  <p>The problem is that the images in this gallery can be different. They can be bigger/smaller - with different ratio.</p>
  
  <p>In this example a <code>.carousel</code> div has <code>height: 450px</code>. To be RWD friendly I want use <code>max-height</code>, but images in this carousel must be 100% to entire div with keeping ratio. Even if some image will be overflowing outsdie this div (or conversely). On this case img must be centered vertically and horizontally (maybe with flexbox?).
  When I do <code>max-height</code> the carousel will be jumping because photos can be bigger or smaller. When I set <code>height</code> to carousel she didn't jumping, but it isn't RWD option and some images can be smaller than div (check example below)</p>
  
  <p><a href="https://jsfiddle.net/30z81wLy/" rel="nofollow">Here is example</a></p>