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

Question

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

谢谢你的帮忙!

编辑:这是在https://chorebug.com/上直播的--看看标题图像。当您更改页面大小时，它会裁剪并调整大小。但是在一个大显示器上，它会从他的头上露出来，我想让它在顶部出现。

Answer 1

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

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

Answer 2

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

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

或

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

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

Answer 3

只需更改属性值

landing-page.css:21

更改此选项将执行您想要的操作background : url("../IMG_4126.jpg") no-repeat top center