css - 使用 Bootstrap 我想在较小的设备上将图像缩放到最小高度

Question

我有一个使用 Bootstrap 实时构建的图形设计作品集网站 http://www.burnser.com/index.html

在大屏幕和中屏幕上，全宽图像看起来很棒。但是当在较小的设备上查看时，图像太小了。这使用类:

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

有没有一种方法可以将较小设备上的图像缩放到最小高度(大约 400 像素)，然后裁剪图像的两侧，聚焦于图像的中心？

Answer 1

您可以使用媒体查询来定位特定设备。

http://getbootstrap.com/css/#grid-media-queries

然后您可以根据设备对图像应用不同的宽度/高度。

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}


@media (min-width: 768px) {
    .img-responsive {
        width: //something;
        height: //something;
    }
}