/**
 * Vertically center images
 * In fluid containers with a very specific ratio (1:1)
 */

/**
 * Enabling clean box-model everywhere
 */
*,
*:before,
*:after {
  box-sizing: border-box;
}
body{
  min-height:500px;
  background-color:#bd1a20;
}
.bottom {
  min-height:500px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}
/**
 * Absolutely positioned image
 * 1. Sticking to side
 * 2. Absolutely centering 
 * 3. Fluid stuff
 */
img {
  position: absolute;
  top: 0; /* 1 */
  left: 0; /* 1 */
  right: 0; /* 1 */
  bottom: 0; /* 1 */
  margin: auto; /* 2 */
  
  max-width: 100%; /* 3 */
  height: auto; /* 3 */
}
.bottom img{
  top:auto;
}