1
我遇到了背景圖像問題。我的背景圖像具有全寬，但沒有響應。在我的代碼中，我使用Bootstrap。我希望這不是問題。響應式背景圖像
圖片在991 px處有或沒有媒體查詢時消失。此外，使圖像全寬的唯一選擇是使用背景大小的封面。
當我使用寬度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>
分享你的HTML問題。你有沒有嘗試添加html類'img-responsiv''？ – ZombieChowder
「在我的代碼中，我也使用bootrap」我認爲他指的是Bootstrap – ZombieChowder
也許你想要[this]（https://jsfiddle.net/dofq9kwr/）這樣的東西？ – Huelfe