Question

如果我不想做的事情，请告诉我。

我正试图让所有这些不同大小的图像保持不失真。除了宽度小于285px容器的图像外，所有图像看起来都很棒。我很好，图像模糊，因为我知道我们正在拉伸它们。我只是希望他们所有人保持他们的宽高比。那些不起作用的是图像＃2，＃3和＃4。

我不能使用任何JavaScript。它需要是纯粹的CSS。并且我不能使用style =“background-image：url”，因为图像是动态添加的，它会使整个脚本不起作用。我认为这意味着我不能使用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;
}

Answer 1

这可能是你最好只获得CSS的。

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

Answer 2

如果动态添加图像，则不能以这种方式添加它们：

<div class="squaregallerywrap" style="background:url('http://smartyet.com/assets/trail-blazer/images/gallery/2/1.jpg')">

然后设置background-size：封面.squaregallerywrap

图像不保持纵横比。无法使用背景图片：封面

2 个答案: