html - 以自适应宽度和固定纵横比显示图像

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 通常比仅设置像素或 %age 高度更明确。