JSFiddle - React, Tailwind, and code Playground

by Q4Dizzy

HTML

<div class="wrapper">
  <div class="container">
    <div class="pic">
      <span>
        <img src="http://igmar.hop.ru/bigheight.jpg" />
	</span>
    </div>
  </div>

  <div class="container">
    <div class="pic">
      <span>
        <img src="http://igmar.hop.ru/bigwidth.jpg" />
	</span>
    </div>
  </div>

  <div class="container">
    <div class="pic">
      <span>
    	<img src="http://igmar.hop.ru/pic1.gif" />
	</span>
    </div>
  </div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
}

.wrapper {
  min-width: 800px;
  height: 100%;
}

.container {
  float: left;
  width: 15%;
  height: 90%;
  border: 1px solid black;
  margin: 0 50px;
  overflow: hidden;
}

.pic {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}

.pic > span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
}