0

調査を試みましたが、スケーラブルでありながら背景画像を div に挿入できる優れた jQuery プラグインを思いつくことができませんでした。例えば、

次のような 4 つの異なる div があるとします。

<div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">

</div>

各 #/id/div には独自の一意の画像が必要であり、ブラウザーの幅と高さに合わせてサイズ変更またはスケーリングできる必要があります。これをIE7+に対応させたい。Stack Overflow コミュニティが役に立てば、それは素晴らしいことです。

div で background-resize:100% を使用できることはわかっていますが、最新のブラウザーでのみ動作します。

4

1 に答える 1

0

あなたを始めるために私が一緒に投げたもの。divのサイズを設定してから作成するか、幅と高さの2つのパラメーターを追加します。

(function( $ ) {
  $.fn.bgImage = function( src ) {
    var d=this;
    var ht=d.html();
    var z=parseInt(d.css('z-index'));
    if(!z) z=0;  
    var oImg=document.createElement('img'); 
    oImg.src=src;
    oImg.style.width=d.width()+'px';
    oImg.style.height=d.height()+'px';
    oImg.style.position='absolute';
    oImg.style.zIndex=z;
    d.html('');
    d.append('<div id="a" style="position:absolute;z-index:'+(z+1)+';">'+ht+'</div>');
    d.append(oImg);
  };
})( jQuery );

$('#one').bgImage('http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif');
于 2012-04-04T21:27:12.877 に答える