響應背景圖像

Question

我的背景圖像有問題。 我的背景圖像具有全寬，但沒有響應。 在我的代碼中，我使用的是Bootstrap。 我希望這不是問題。

無論有沒有媒體查詢，圖片都會以991像素消失。 此外，使圖像全寬的唯一選項是背景大小的封面。

當我使用寬度100％（這會使它響應）不起作用。 然后圖像分裂。 max-width:100%相同max-width:100% 。 我不知道為什么它不起作用。

我的代碼：

 body, html { padding:0px; margin:0px; font-family: 'TheSans Swisscom' !Important; } @media only screen and (min-width: 991px) { .col-md-3{ width: calc(25% - 10px) !Important; margin-right:5px; margin-left:5px; margin-top: 10px; background-color: white; position:relative !Important; font-family: TheSans Swisscom; display: block; padding:0px !Important; } } a:link { color: black; } a:visited { color: Black; } .a { padding: 70px; position: relative; right: -5%; } a { color: black !important; } .center-block { width: 100%; } h2 { font-size:30px; margin: 0 0 auto; width: 9em; text-align: center; } .ptags { line-height: 1.2; padding: 5px; } .button { margin-right: 10px; height: 45px; width: 45px; background-color: black; font-size: 60px; color: white; text-align: center; line-height: 45px; bottom: 10px; cursor: pointer; z-index: 1; font-family: TheSansSwisscom; position: relative; right: -98%; top: -308px; } .ktm { text-align: center; } .h1{ font-size: 36px; text-align: center; } h2 { font-size:30px; margin: 0 0 auto; width: 9em; text-align: center; } .img-center{ display: block; margin:0 auto; } a:link { color: black; } .row{ display:block; } @media only screen and (min-width: 991px){ .img { background-image: url('https://pbs.twimg.com/profile_images/3396462371/53b106cad4de869739517b1ff5d75429.jpeg'); background-size: cover; background-repeat: no-repeat; } } .container{ width: 100% !important; padding: 100px; } .cardContainer { width: 1200px; position: relative; margin-left: calc( 50% - 600px); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <section class="container img"> <h1 class="h1 a"><a name="Details">Details</a></h1> <div class="button"> <p>+</p> </div> <div class="cardContainer"> <div class="col-md-3 col-xs-12"> <img class="center-block"src="http://farm8.static.flickr.com/7411/8725728890_b056a881c5_m.jpg" alt="thirdimage"> <h2 class="Details">Details</h2> <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p> </div> <div id=cardPrototype class="col-md-3 col-xs-12"> <img class="center-block"src="http://farm2.static.flickr.com/1577/26053634152_9a7d5b3580_m.jpg" alt="thirdimage"> <h2>Details</h2> <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p> </div> <div class="col-md-3 col-xs-12"> <img class="center-block"src="http://farm8.static.flickr.com/7250/7445511584_9079770764_m.jpg" alt="thirdimage"> <h2>Details</h2> <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p> </div> <div class="col-md-3 col-xs-12"> <img class="center-block"src="http://farm9.static.flickr.com/8540/8668499106_36a8b6cab8_m.jpg" alt="thirdimage"> <h2>Details</h2> <p class="ptags">Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.</p> </div> </div> </section> 

Answer 1

我不確定這是不是你想要的但看看。

 .img { background-image: url('https://pbs.twimg.com/profile_images/3396462371/53b106cad4de869739517b1ff5d75429.jpeg'); background-repeat: no-repeat; background-size: cover; } .center-block{ width:100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <section class="container img"> <h1 class="h1 a"><a name="Details">Details</a></h1> <div class="button"> <p>+</p> </div> <div class="cardContainer"> <div class="col-md-3 col-xs-12"> <img class="center-block" src="http://placehold.it/220x150" alt="thirdimage"> <h2 class="Details">Details</h2> <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p> </div> <div id=cardPrototype class="col-md-3 col-xs-12"> <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage"> <h2>Details</h2> <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p> </div> <div class="col-md-3 col-xs-12"> <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage"> <h2>Details</h2> <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p> </div> <div class="col-md-3 col-xs-12"> <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage"> <h2>Details</h2> <p class="ptags">ad adaésdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)</p> </div> </div> </section> 

但是你可能想要使用background-size：cover; with background-repeat：no-repeat; 這將使它完全響應

我修改了片段

Answer 2

我可以從你的問題中理解，希望這將解決你所遇到的問題

 background-repeat: no-repeat;