如果宽度小于容器，图像会变形

Question

我试图让所有这些不同大小的图像保持不扭曲。除了那些宽度小于285px的容器外，所有的图片都很好看。我对模糊的图像很满意，因为我知道我们正在拉伸它们。我只想让他们全部保持他们的长宽比。那些不工作的是图像＃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>