Bootstrap响应IMG缩放到顶部而不是中心

Question

我在使用HTML / CSS的Bootstrap模板中有一张背景照片。我想知道是否可以在更大的屏幕上制作它，而不是缩放图像并放大到中心，它会放大到顶部？

谢谢你的帮助！

编辑：这是在https://chorebug.com/现场直播 - 看看标题图像。当您更改页面大小时，它会裁剪并调整大小。但是在一台大型显示器上，它突然出现了，我希望它可以在顶部裁剪。

Answer 1

使用以下规则附加全屏大小的媒体查询：

@media (min-width: 768px) {
     header.masthead {
          background-position: top;
     }
}

Answer 2

您只需设置标题图像的背景位置即可。为此，您可以在类规则background-position中添加header.masthead属性

header.masthead {
    background-position: center top;
}

要么

您可以将背景速记更改为：

header.masthead {
    background: url("../IMG_4126.jpg") no-repeat center top;
}

Answer 3

只需更改属性值即可

着陆page.css：21

改变这将做你想要的background : url("../IMG_4126.jpg") no-repeat top center