121

背景画像を別の div に設定したいのですが、私の問題は次のとおりです。

  1. 画像のサイズは固定(60px)です。
  2. さまざまな div のサイズ

背景画像を引き伸ばして、div の背景全体を埋めるにはどうすればよいですか?

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

ここでコードを確認してください。

4

10 に答える 10

186

追加

background-size:100% 100%;

background-image の下の CSS に追加します。

正確な寸法を指定することもできます。

background-size: 30px 40px;

ここ：JSFiddle

于 2012-06-27T10:00:27.450 に答える
50

最新の CSS3 (将来的に推奨され、おそらく最良の解決策)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

最大。切り抜きも変形もせずに伸ばす (背景が塗りつぶされない可能性があります) : background-size: contain;
絶対的に引き伸ばす(変形の原因になる場合がありますが、切り抜きは行われません) : background-size: 100% 100%;

「古い」CSS「常に機能する」方法

(相対的に配置された)親の最初の子としての絶対配置イメージで、親のサイズに引き延ばします。

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

CSS3 と同等background-size: cover;:

これを動的に実現するには、contain メソッドの代替手段(以下を参照)の反対を使用する必要があります。トリミングされた画像を中央に配置する必要がある場合は、動的にそれを行う JavaScript が必要です。たとえば、jQuery を使用します。

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

実際の例:
CSSクロップのような例

CSS3 と同等background-size: contain;:

これは少しトリッキーな場合があります。親をオーバーフローする背景の寸法には、CSS が 100% に設定され、もう一方は自動に設定されます。 実際の例: 画像として背景をストレッチするcss

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

CSS3 と同等background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

PS:「古い」方法でカバー/コンテインに相当するものを完全に動的に実行するには (したがって、オーバーフロー/比率を気にする必要はありません)、javascript を使用して比率を検出し、説明どおりに寸法を設定する必要があります。 ..

于 2015-06-25T04:32:11.890 に答える
24

これには、CSS3background-sizeプロパティを使用できます。次のように書きます。

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

これを確認してください：http://jsfiddle.net/qdzaw/1/

于 2012-06-27T09:57:50.027 に答える
21

あなたは付け加えられます：

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

詳細については、 css3 background-sizeを参照してください。

于 2012-06-27T10:05:23.573 に答える
3

プロパティcssを使用して：

background-size: cover;
于 2015-08-26T09:38:31.823 に答える
2 
body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}
于 2016-01-21T21:58:26.767 に答える
0

縦横比を維持するには、background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}
于 2017-10-29T19:13:04.830 に答える