html - 如果宽度小于容器，图像会失真

Question

我试图让所有这些不同尺寸的图像保持不失真。除了宽度小于 285px 容器的图像外，所有图像看起来都很棒。我可以接受图像模糊，因为我知道我们正在拉伸(stretch)它们。我只希望它们都保持纵横比。不起作用的是图像 #2、#3 和 #4。

我不能为此使用任何 JavaScript。它需要是纯 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

你试过使用https://github.com/karacas/imgLiquid吗？

只包括:

<script src="js/imgLiquid-min.js"></script>

调用函数

$(document).ready(function() {
    $(".imgLiquidFill").imgLiquid();
});

然后将 class="imgLiquidFill imgLiquid"添加到您的图像 div 容器

<div class="squaregallerywrap imgLiquidFill imgLiquid" >
    <img src="/path/to/image" />
</div>