In my current project, I am facing an issue with maintaining the aspect ratios of images of different sizes. Most of them are looking good except for those whose width is smaller than the container's width of 285px. Even though some blurriness is acceptable due to stretching, I need to ensure that all images preserve their aspect ratios. The problematic images are #2, #3, and #4.
Unfortunately, I am unable to use JavaScript for this task; it has to be solved using pure CSS.
Visit this link for a demonstration.
.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;
}