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

您是否尝试过使用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>

如果宽度小于容器，图像会被扭曲

1 个答案: