css - 背景图像在 Chrome 上使用 Bootstrap 在右侧重复

Question

我是 bootstrap 的新手，已经在几个浏览器上测试了我的网页。

当我在 chrome 上从左侧或右侧缩小选项卡的宽度时，部分图像被裁剪并放在图像的另一侧。 imgur 图片显示了问题。

如有任何帮助或建议，我们将不胜感激!

This is the issue of bootstrap with chrome

My website page with a problem is here

我把我的CSS代码放在下面:

#header {
    width: 100%;
    min-height: 500px;
    /*height: 50%;*/
    background-image: url("/galleryPhotos/whiteVan2.jpeg");
    margin-top: 0px;
    background-size: cover;
    background-position: 100%;
    background-repeat: no-repeat;
    top: 0px;
    position: relative;
}

Answer 1

尝试将这些添加到您的 css，在您的示例中它似乎对我有用。

-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover; // opera

这是一个 fiddle (尽管图片不同):https://jsfiddle.net/46zcm0yL/