Question

我正在使用bootstrap在摄影网站的网格中显示图像。

Bootstrap负责显示宽度相同的所有照片。但是，我需要找到一种方法将垂直图片的高度限制为水平对等点的高度。

结果应该是在网格中显示时垂直图片被裁剪为水平图片。

我正在使用此代码显示图片：

<div class="col-xs-12 col-sm-4 col-md-3">
   <a href="img/picture-1.jpg" data-lightbox="gallery"><img class="img-responsive" src="img/picture-1.jpg"></a>
</div>

或者，或者：

<a class="col-xs-12 col-sm-4 col-md-3" href="img/picture-1.jpg" data-lightbox="gallery"><img class="img-responsive" src="img/picture-1.jpg"></a>

我尝试使用固定的宽度和高度像素值，但无济于事。

Answer 1

在CSS中，为什么不这样做：

.img-responsive {
    height: 30vh;
}

垂直高度vh通常比设置像素或％年龄高度更明确。

Answer 2

在此处找到解决方案：CSS Image size, how to fill, not stretch?。

Dominic Green的解决方案：

<div class="container"><img src="ckk.jpg" /></div>

.container
     {
      width:300px;
     height:200px; 
     display:block; 
     position:relative;
     overflow:hidden;
     }
.container img 
    {
     position:absolute;
     top:0;
     left:0; 
     width:100%;
     }

css很难做你想做的事情并使图像居中，有一个快速修复jquery，如

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

显示具有自适应宽度和固定宽高比的图像

2 个答案: