60

#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;
}
4

9 に答える 9

24

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

background-size: cover;

この CSS3 プロパティの使用については、次の記事を参照してください: CSS-Tricksによる Perfect Full Page Background Image およびDavid Walsh による CSS Background-Size。

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

于 2013-12-31T17:44:01.497 に答える
7

これを試してください（イメージが含まれているクラスに適用します（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;
}
于 2014-12-18T15:43:20.250 に答える
6

同様の問題があり、次を使用して解決しました：

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

... ここで、パディングを追加する必要がありました: 50% 他の方法では機能しなかったためです。バナー画像のサイズ比に従って、コンテナの高さを設定できました。私の場合もレスポンシブです。

于 2014-12-15T10:32:01.163 に答える
1

固定を使用しない:

.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;
}
于 2015-04-07T11:07:10.420 に答える
1

Mby ブートストラップimg-responsiveクラスを探しています。

于 2016-11-18T20:13:43.970 に答える
1

これを行う方法は、background-size を使用することです。この場合、次のようになります。

background-size: 50% 50%;

また

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

于 2013-09-27T16:41:09.810 に答える
1

これはうまくいくはずです

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;
于 2014-07-15T10:10:59.787 に答える