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

【问题标题】：Using Boostrap I'd like to scale images to min height on smaller devices使用 Bootstrap 我想在较小的设备上将图像缩放到最小高度
【发布时间】：2017-10-06 08:48:47
【问题描述】：

我有一个使用 bootstrap http://www.burnser.com/index.html 实时构建的图形设计组合网站

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

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

有没有办法将较小设备上的图像缩放到最小高度（约 400 像素），然后裁剪图像的两侧，重点放在图像的中心？

【问题讨论】：

使用媒体查询来定义你想要的风格。您可以根据屏幕大小设置样式。
仅使用 CSS 无法裁剪图像。您需要包装元素或背景图像。
如何使用包装元素 Huelfe 来完成？

标签： css image twitter-bootstrap responsive

【解决方案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;
    }
}

【讨论】：