214

私はウェブサイト (g-floors.eu) を持っていて、背景 (CSS でコンテンツの bg-image を定義しました) もレスポンシブにしたいと考えています。残念ながら、私が考えることができる1つのことを除いて、これを行う方法についてはまったくわかりませんが、それはかなりの回避策です. 複数の画像を作成し、CSS 画面サイズを使用して画像を変更しますが、これを実現するためのより実用的な方法があるかどうか知りたいです。

基本的に私が達成したいのは、画像（透かし「G」付き）のサイズが自動的に変更され、画像の表示が少なくなることです。もちろん出来れば

リンク: g-floors.eu

私がこれまでに持っているコード（コンテンツ部分）

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}
4

19 に答える 19

401

ブラウザウィンドウのサイズに基づいて同じ画像を拡大縮小する場合：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

幅、高さ、またはマージンを設定しないでください。

編集：幅、高さ、またはマージンを設定しないことに関する前の行は、ウィンドウサイズでのスケーリングに関するOPの元の質問を参照しています。他のユースケースでは、必要に応じて幅/高さ/マージンを設定することをお勧めします。

于 2012-09-26T19:51:02.147 に答える
78

このコードにより、背景画像が中央に移動し、divサイズが変更されてもサイズが修正されます。小さい、大きい、通常のサイズに適しています。すべてに最適です。背景のサイズまたはdivのサイズが変更される可能性のあるプロジェクトに使用します

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
于 2013-11-16T20:12:23.367 に答える
36

CSS:

background-size: 100%;

それでうまくいくはずです！:)

于 2012-09-26T19:49:18.437 に答える
12 
#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}
于 2016-11-24T06:05:38.277 に答える
9

使った

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

これは本当にうまくいきました。

于 2013-11-16T18:36:39.167 に答える
6

下の画像にパディングを追加するレスポンシブ Web サイトの高さ/幅 x 100 = パディング-下 %:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

より複雑な方法:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

バックグラウンド eq Firefox Ctrl + M のサイズを変更して、魔法の素敵なスクリプトを表示してみてください。

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

于 2014-07-25T08:27:45.703 に答える
5

これを使用できます。私はテストしましたが、その動作は100％正しいです：

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

この画面サイズ シミュレーターで Web サイトの応答性をテストできます: http://www.infobyip.com/testwebsiteresolution.php

変更を加えるたびにキャッシュをクリアします。Firefox を使用してテストしたいと思います。

他のサイト/URL から画像を使用したい場合: background-image:url('../images/bg.png'); //この構造は、独自のホストされたサーバーから画像を使用するためのものです。次に、次のように使用します。 background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

楽しみ ：）

于 2013-04-26T15:07:15.287 に答える
4 
    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>
于 2016-12-03T15:09:53.477 に答える
3

わずか 2 行のコードで動作します。

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}
于 2017-01-23T06:20:09.873 に答える
2

jQueryによる平方比への適応

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }
于 2013-06-15T10:10:01.160 に答える
0

私は、それを行う最良の方法はこれだと思います：

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

このように、これ以上何もする必要はなく、非常に簡単です。

少なくとも、それは私にとってはうまくいきます。

お役に立てば幸いです。

于 2014-04-25T13:18:54.107 に答える