title: Images being distored if width is smaller than container
body: <p>I'm trying to get all of these different size images to remain undistorted. All the images look great except for the ones that have a smaller width than the container of 285px. I'm ok with the images being blurry because I know we are stretching them. I just want all of them to keep their aspect ratios. The ones that are not working are images #2, #3, and #4. </p>
  
  <p>I can't use any JavaScript for this. It needs to be pure css.</p>
  
  <p><a href="http://jsfiddle.net/pp74fb7b/9/" rel="nofollow">http://jsfiddle.net/pp74fb7b/9/</a></p>
  
  <pre><code>.squaregallerywrap {
  width:  285px; 
  height: 285px;
  }
  
  .squaregallerywrap img {
  min-width: 100%;
  min-height: 100%;
  max-height: 286px;
  min-width: 286px;
  display:block;
  margin:auto;
  position:relative;
  -moz-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -o-transform:translateX(-50%);
  transform:translateX(-50%);
  left:50%;
  }
  
  li {    
  float: left;
  overflow: hidden;
  -webkit-transition: 0.4s all linear;
  transition: 0.4s all linear;
  }
  </code></pre>