Resize Picture without streching inside a div

Resize Picture without streching inside a div just using css regardless to portrait or landscape.

by efirat

HTML

<div class="container">
  <img src="http://placehold.it/500x500" class="pic" />
</div>

<div class="container">
  <img src="http://placehold.it/1500x500" class="pic" />
</div>

<div class="container">
  <img src="http://placehold.it/500x1500" class="pic" />
</div>

CSS

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}