バックグラウンドリピートが完全に表示されない場合、画像が表示されないようにします。

Question

CSSで背景を繰り返すとき、完全に表示できる場合にのみ画像を表示します。

ピクセル単位で幅を設定する必要がありますか？または、完全に表示できる場合にのみイメージを表示するCSSプロパティがありますか？

[]

<div align="left" style="padding-left: 30px;"> 
    <div class="rep_div" style="background:url('file.png'); width:93.5%; display:block;height:3px;"></div> 
</div> 

Answer 1

私はあなたが達成しようとしている正確にわからないんだけど、額面であなたは、あなたのdivの寸法を測定し、あなたの画像の大きさを測定しないいくつかのJSが必要になります単純な比較では、divと画像のサイズが同じか大きい場合はdivの背景画像が画像のURLに設定されます。

はここでCSSとjQueryを使用して、基本的な近似をだ

/* css */ 
#container{ ...no image background set here... } 

/* js */ 
var $container = $('#container'); 
var image = new Image(); 
image.src = 'path/to/image.jpg'; 
image.onload = function() { 
    if (
    $container.outerWidth() >= this.width && 
    $container.outerHeight() >= this.height 
) $container.css('background-image': 'url('+image.src+')'); 
}); 

あなたはまさにこのコードは簡単に単に「に等しいかそれ以上」に依存しないように適合させることができるよりも、繰り返し画像の数に合うようにしようとしている場合は、しかし、イメージの次元の乗算。

は、このコードは一度だけ実行されることに注意してください、より良い練習はこのようなものになるだろう：

var $container = $('#container'); 
var image = new Image(); 

image.src = 'path/to/image.jpg'; 

var calculate = function() { 
    if (
    $container.outerWidth() >= image.width && 
    $container.outerHeight() >= image.height 
) { 
    $container.css('background-image': 'url('+image.src+')'); 
    } 
    else { 
    $container.css('background-image': 'none'); 
    } 
}); 

image.onload = calculate; 
$(window).on('resize', calculate); 

Answer 2

さて、@Arnold私は完全にあなたの質問を理解していることをわからないんだけど、中それが助け場合は、あなたが例えば、background-sizeとbackground-repeatプロパティを使用することができます。xとyは、それぞれ、幅と高さを表すパーセンテージである

<div style="background-image: url('file.png'); background-size: x% y%; background-repeat: repeat-x;"> 

。したがって、画像が縦長（幅よりも大きい）の場合、yを100％に、xを100％で均等に割り切ってアスペクト比を最もよく表す割合に設定します（10,20,25,33.3、 50％）。この方法では、画像はx軸に沿って均等に繰り返されますが、要素の高さの100％を占めているため、y上に画像を配置する必要はありません。

（画像がランドスケープ（それが高さよりも広い）であれば逆に、xが100％になるとyは100で割り切れるとrepeat-y代わりにrepeat-xを使用する。）

これは、いくつかの工夫がかかることがあり、および画像がアスペクト比が多少ずれているように見えるものかどうかによって異なります。それはあなたが必要とする解決策かもしれないし、そうでないかもしれませんが、私はそれがショットに値すると考えました。