Fluid Image in a Fluid Container

by Jonathan Fernandez

HTML

<div>
  <img src="http://i.imgur.com/kOY2G57.jpg">
</div>

CSS

div {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  
  height: 80vh;
  width: 80%;
  background-color: red;
  position: relative;
  overflow: hidden;
}

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  	min-height: 100%;
		min-width: 100%;
		width: auto;
		height: auto;
/*     max-width: 100%; // If used Image needs to be tall enough to fill div */ 
/*     max-height: 100%; If used Image needs to be wide enough to fill div */
}