Resize to fit image in div, and center horizontally and vertically

fit_image.css

/* answer: http://stackoverflow.com/a/31699529 */

.container {
  overflow: hidden;
  width: 400px;
  height: 300px;
  position:relative
}

img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; /* this centers image inside */
  width: 100%; /* this is to shrink the images of large width */
  height: auto;
}