如何防止我的背景圖像縮小？

我有一個我的引導行的背景圖像。當我調整瀏覽器窗口的大小（縮小）時，圖像會隨之縮小。如何防止我的背景圖像縮小？

我正在努力使圖像保持居中，不收縮。因此，當我縮小瀏覽器時，圖像應該保持在頁面的中心位置，並且其邊緣基本上變得不可見。

我有以下的CSS：

.my-bootstrap-row { 
    background-image: url(foo.jpg); 
    background-position:fixed; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    height:700px; /* image height is also 700px */ 
}

和下面的HTML：

<div class="row my-bootstrap-row"> 
    blah blah 
</div>

缺少什麼我在這裏？

來源

2017-08-09 AngryHacker

你可以把小提琴？ –

它的收縮只是因爲你設置background-size: 100% 100%;設置你的background-size: cover;，你也可以做到這一點對背景圖片尋找中心background-image: url(foo.jpg) center center;

.my-bootstrap-row { 
background-image: url(foo.jpg) center center no-repeat; 
background-position:fixed; 
background-size: cover; 
background-repeat: no-repeat; 
height:700px; /* image height is also 700px */

來源

2017-08-09 05:33:03 codesayan

根據你代碼中的錯誤是在這裏，

.my-bootstrap-row { 
    background-image: url(foo.jpg); 
    background-position:fixed; 
    background-size: 100% 100%; //ERROR making the image shrink with the window remove this and set is as cover. 
    background-repeat: no-repeat; 
    height:700px; /* image height is also 700px */ 
}

嘗試這樣的事情，

.my-bootstrap-row { 
    background: url("../images/bg.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

在我的代碼中，背景屬性在一行中，我還添加了size屬性以支持其他瀏覽器以防萬一。

來源

2017-08-09 05:33:41 Sand

嘗試做這樣的

您正在使用background-size: 100% 100%使用background-size: cover

希望這將有助於你

.my-bootstrap-row { 
 
    background-image: url(https://www.axure.com/c/attachments/forum/7-0-general-discussion/3919d1401387174-turn-placeholder-widget-into-image-maintain-interactions-screen-shot-2014-05-29-10.46.57-am.png); 
 
    background-position:fixed; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    height:700px; /* image height is also 700px */ 
 
    
 
}

<div class="row my-bootstrap-row"> 
 
    blah blah 
 
</div>

來源

2017-08-09 05:36:22

我用background-size:cover代替background-size:100% 100%

.my-bootstrap-row { 
 
    background-image: url('https://peterwardhomes.files.wordpress.com/2014/12/goole-area-shot_005.jpg'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
\t background-position: fixed; 
 
    height:700px; /* image height is also 700px */ 
 

 
}

<div class="row my-bootstrap-row"> 
 
    blah blah 
 
</div>

來源

2017-08-09 05:37:25

如何防止我的背景圖像縮小？

回答

相關問題