0

私は次のHTMLを持っています：

<section id="infopic" class="grid_5 prefix_1" style="height: 500px;">
   <div id="login-image"></div>
</section>

そしてこのCSS：

#infopic {
   background-image: url("/Images/login.png");
}

#infopicの境界に合わせて画像を拡大する方法はいくつかありますが、それでも正しく機能させることはできません。現在、画像の上のコード（500pxの正方形よりも小さい）で繰り返されています。

4

4 に答える 4

1

background-sizeプロパティを追加してみてください。

いくつかの例: http://www.css3.info/preview/background-size/

于 2013-01-07T08:59:59.373 に答える
0

background-size 宣言を試すことができます:

background-size: 100% 100%;

これは IE9 以降、Firefox 4 以降、Opera、Chrome、Safari 5 以降で動作します。古いブラウザではできないと思います。多分：

#infopic {
    background-image: url("/Images/login.png") 50% 50% no-repeat;
    background-size: 100% 100%;
}

後方互換性のため？

于 2013-01-07T09:00:53.077 に答える
0

CSS3 プロパティbackground-size: 100%;を使用して、要素全体に画像を引き伸ばすことができます。

#infopic {
  height: 500px;
  width: 1000px;
  background-image: url("http://placehold.it/250x250");
  background-repeat: no-repeat;
  background-size: 100%;
}

これは CSS3 プロパティであるため、古いブラウザーではサポートされていません (IE のサポートについても確信が持てません) が、最新のブラウザーでは便利です。

追加のメモとして、外部 CSS とインライン CSS を混在させるのはひどい考えです。そのため、高さの宣言を外部 CSS に移動しました。

:)

http://jsfiddle.net/x4w7V/

于 2013-01-07T09:02:04.627 に答える
0

次のように使用します。

img {
  background-size: 100%;
  max-width: 100%;
}

参照：

流体画像

于 2013-01-07T09:19:54.690 に答える