The images do not stay in proportion. Unable to use background image: cover
If what I am trying to do is not possible, just let me know.
I am trying to get all of these images of different sizes to stay undistorted. All images look great, except those that are smaller than the 285px container. I'm fine with blurry images because I know we're stretching them. I just want them to keep their proportions. The ones that don't work are images # 2, # 3, and # 4.
I cannot use JavaScript for this. It should be pure css. And I cannot use style = "background-image: url" because the images are added dynamically and that will make the whole script not work. I think I cannot use 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;
}
+3
source to share
2 answers
This is probably the best thing you get with CSS only.
CSS
.squaregallerywrap {
width: 285px;
height: 285px;
overflow:hidden;
margin:0;
padding:0;
}
.squaregallerywrap img {
min-width: 100%;
min-height: 100%;
display:block;
margin:auto;
position:relative;
-moz-transform:translateX(-50%)translateY(-50%);
-webkit-transform:translateX(-50%)translateY(-50%);
-ms-transform:translateX(-50%)translateY(-50%);
-o-transform:translateX(-50%)translateY(-50%);
transform:translateX(-50%)translateY(-50%);
left:50%;
top:50%;
}
li {
float: left;
overflow: hidden;
-webkit-transition: 0.4s all linear;
transition: 0.4s all linear;
}
DEMO: JSFiddle
+1
source to share