图像变形并且不保持宽高比-我需要纯CSS解决方案

Question

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.

I can't use any JavaScript for this. It needs to be 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 all linear;
transition: 0.4s all linear;
}

Answer 1

How about using background-image on the div instead? Sizing the image will be much easier that way. I made you a fiddle with square images using background-size: cover; , which crops them into squares but doesn't distort the images. Here's also another fiddle , where they maintain their aspect ratios and don't crop using background-size: contain; .

Answer 2

Is this what you want: jsfiddle

If I understand you correctly, you want to maintain images from being undistorted but yet make all of them the same size container, set an explicit width and height on the img tag, and use object-fit: cover which acts like background-size: cover . Though it isn't supported in IE.

See http://caniuse.com/#feat=object-fit