2

Web サイトの画像があり、任意の画面を覆うようにサイズを変更したいと考えています。

ノート：

私が考えることができる唯一の解決策は、高さと幅のサイズを変更することでしたが、それによりスクロールバーが表示されます。私が作成するのに苦労しているCSSソリューションだと思います。

編集：

これは私が試したコードですが、写真を「ズーム」して画面全体に引き伸ばします。品質と実際の写真が表示されるようにサイズを変更したいと思います。

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  min-width: 100%;
  min-height: 100%;
}
4

6 に答える 6

3

シンプルなcssを使うだけ

#theimg {
    position : fixed; /*can also use absolute and the parent element can have relative*/
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}

ここにデモフィドルがあります

http://jsfiddle.net/rg3eK/

于 2013-09-05T18:59:46.677 に答える
2

CSS background プロパティを使用したい: http://css-tricks.com/perfect-full-page-background-image/

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

作品:

Safari 3 以降 Chrome Whatever + IE 9 以降 Opera 10 以降 (Opera 9.5 では background-size がサポートされていますが、キーワードはサポートされていません)

于 2013-09-05T18:57:36.350 に答える
0

写真のサイズ変更オプションを確認することをお勧めします。

または、これを追加してみてください:-

<img src="picture.jpg" width="100%" alt="">

つまり、画像の一方の寸法のみを設定すると、もう一方の寸法はそれに比例してしまいます。

またはこれ:-

#image{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
left:0;
right:0;
bottom:0;
top:0;}
于 2013-09-05T18:57:02.727 に答える
0

要素のCSSで使用background-size: coverするHTML

html {
    background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

このフィドルを参照してください：

jsフィドル

于 2013-09-05T19:08:48.513 に答える
0

より良いcss.youはこれを使用する必要があります

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2014-09-07T15:57:01.820 に答える