If what I am attempting is not feasible, please inform me.
I am currently working on displaying images of various sizes without distortion. While most images look good, those with a smaller width than the container of 285px are getting distorted. I am fine with them being blurry as they stretch, but I want to maintain their aspect ratios. The problematic images are #2, #3, and #4.
I am restricted from using JavaScript for this task; it must be achieved solely through CSS. Additionally, I cannot use style="background-image:url" because the images are added dynamically, causing the entire script to malfunction. This limitation also rules out background-image:cover.
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 all linear;
transition: 0.4s all linear;
}