web-dev-qa-db-ja.com

Twitter Bootstrap Div内のレスポンシブ背景画像

すべてのブラウザでレスポンシブ、サイズ変更可能、比例するように#bgイメージを変更するにはどうすればよいですか？

HTML：

 <div class="container">
       <div class="row">
          <div class="col-md-2"></div>

            <div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">

               </div>

            <div class="col-md-2"></div>
       </div>
  </div>

css：

@import url('bootstrap.min.css');

body{
    background: url('../img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 12%;    
}

#bg{
    background:url('../img/con_bg4.png') no-repeat center center;
    height: 500px;
}
htmlcsscss3twitter-bootstraptwitter-bootstrap-3
59
vkatsitadze

私は解決策を見つけました。

background-size:100% auto;
78
vkatsitadze

あなたも試してみてください：

background-size: cover;

このCSS3プロパティの使用について読むべき良い記事がいくつかあります：P erfect Full Page Background Image by CSS-Tricks and CSS Background-Size by David Walsh .

注意してください-これはIE8-では動作しません。ただし、Chrome、Firefox、Safariのほとんどのバージョンで動作します。

24
doodelicious

これを試してください（画像が含まれているクラスに適用してください（img自体ではありません）、例えば.

.myimage {
  background: transparent url("yourimage.png") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 500px;
}
7
Jowita Emberton

私はこれも仕事をするべきだと信じています：

background-size: contain;

アスペクト比を失わずに、要素内に収まるように画像のサイズを変更する必要があることを指定します。

6
KevinAdu

私は同様の問題があり、私はそれを使用してそれを解決しました：

background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;

...ここでpadding：50％を追加する必要がありました。コンテナの高さを設定できましたバナー画像のサイズ比により。私の場合も反応が良いです。

6
Mashhood

これは動作するはずです

background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
1
Jay

これを行う方法は、バックグラウンドサイズを使用することですので、あなたの場合：

background-size: 50% 50%;

または

要素の幅と高さもパーセンテージで設定できます

1
Hive7

固定を使用しないでください：

.myimage {
   background:url(admin-user-bg.png) no-repeat top center;
   background: transparent url("yourimage.png") no-repeat top center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: 100%;
   height: 500px;
}
1
RayKech

Mby bootstrap img-responsiveクラスを探しています。

1
Dzintars