1
私は自分の背景画像に問題があります。私の背景イメージは全幅ですが、反応しません。私のコードでは、私はブートストラップを使用しています。私はこれが問題ではないことを願っています。レスポンシブな背景画像
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を持っている問題を解決する、あなたの質問から理解できるように私は同じくらい – ZombieChowder
"私のコードではbootrapも使用しています"私は彼がBootstrapを指していると思います – ZombieChowder
[this]（https://jsfiddle.net/dofq9kwr/）のようなものが必要でしょうか？ – Huelfe