html - Images Distored and not staying in aspect ratio - I need pure CSS solution -

i'm trying of these different size images remain undistorted. images great except ones have smaller width container of 285px. i'm ok images being blurry because know stretching them. want of them keep aspect ratios. ones not working images #2, #3, , #4.

i can't use javascript this. needs pure css.

http://jsfiddle.net/pp74fb7b/9/

.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 linear; transition: 0.4s linear; } 

how using background-image on div instead? sizing image easier way. made a fiddle square images using background-size: cover;, crops them squares doesn't distort images. here's another fiddle, maintain aspect ratios , don't crop using background-size: contain;.