Question

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

我无法使用任何JavaScript。它需要是纯粹的CSS。

.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

如何在div上使用background-image呢？通过这种方式调整图像大小会更容易。我使用background-size: cover;制作了方形图像a fiddle，将它们裁剪成正方形，但不会扭曲图像。这里也是another fiddle，它们保持宽高比并且不使用background-size: contain;进行裁剪。

Answer 2

这是你想要的：jsfiddle

如果我理解正确，您希望保持图像不失真但仍然使所有图像都具有相同大小的容器，请在width标记上设置明确的height和img ，并使用object-fit: cover，其行为类似于background-size: cover。虽然它在IE中不受支持。

请参阅http://caniuse.com/#feat=object-fit

图像分散但不保持纵横比 - 我需要纯CSS解决方案

2 个答案: