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