0

このdivのグループがある場合、ブラウザのサイズが変更されたときに各背景画像のサイズを変更するにはどうすればよいですか？基本的に、ボックスのすべてのコンテンツをレスポンシブデザインとして配置します。

したがって、最大幅は画像の寸法です。

<div class="box">
  <div class="dog_1"></div>
  <div class="dog_2"></div>
  <div class="dog_3"></div>  
  <div class="dog_4"></div>
</div>

div[class*='dog_'] {
   background: url("http://ecx.images-amazon.com/images/I/419c%2BE2j0kL._SL500_AA300_.jpg");
   background-repeat: no-repeat;
    height:200px
}

ここでのデモ：http： //jsfiddle.net/LPKkk/

4

3 に答える 3

2

background-sizeプロパティを使用できます： https ：//developer.mozilla.org/en-US/docs/CSS/background-size

ただし、IE7＆8ではサポートされていません。これらのブラウザをサポートする必要がある場合は、背景画像やIE独自のフィルタの代わりに、パーセントベースの幅と高さの画像要素を使用する必要がある場合があります。例：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale');

IE画像フィルターの1つは、画像パスが通常の背景画像のようにCSSドキュメントに対してではなく、（要素のように）HTMLドキュメントに対して相対的であることです。

于 2012-12-20T00:26:34.637 に答える
0

CSS3background-size: cover/contain;プロパティを使用して、背景画像を拡大縮小できます：http: //jsfiddle.net/LPKkk/1/

于 2012-12-20T00:26:14.850 に答える
0 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;

(前回カバーを機能させるには、何らかの理由で !important を使用する必要がありました)

他のいくつかのアプローチへのリンクもあります。

于 2013-01-03T01:00:16.263 に答える