Hintergrundwiederholung verhindern, dass Bild angezeigt wird, wenn es nicht vollständig angezeigt werden kann

Question

Wenn ich einen Hintergrund in CSS wiederhole, möchte ich nur das Bild anzeigen, wenn es vollständig angezeigt werden kann.

Muss ich die Breite in Pixeln einstellen? Oder gibt es eine CSS-Eigenschaft, die das Bild nur dann anzeigt, wenn es vollständig angezeigt werden kann?

[]

<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

Ich bin nicht sicher, was genau erreichen Sie versuchen, aber für bare Münze finden Sie einige JS benötigen, die Ihre div Dimensionen misst, misst Abmessungen Ihres Bildes und macht ein einfacher Vergleich, wenn das div die gleiche Größe oder größer als das Bild hat, wird das Hintergrundbild des div auf die URL des Bildes gesetzt.

Hier ist eine grundlegende Annäherung mit CSS und 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+')'); 
}); 

Wenn Sie genau die Anzahl der wiederholten Bilder zu passen versuchen, als dieser Code kann einfach hängen nicht nur angepasst werden, auf „gleich oder größer“, aber eine Multiplikation der Bildmaße.

sicher sein, zu beachten, dass dieser Code nur einmal ausgeführt wird, wäre die bessere Praxis so etwas wie diese:

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

Okay, @Arnold Ich bin nicht sicher, dass ich Ihre Frage verstehen, aber in Fall hilft es, könnten Sie die background-size und background-repeat Eigenschaften, zum Beispiel verwenden:

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

Wo x und y Prozentsätze sind, die die Breite und die Höhe darstellen. Wenn Sie also ein Bild im Hochformat haben (größer als breit), setzen Sie y auf 100% und x auf einen Prozentsatz, der durch 100% teilbar ist und das Seitenverhältnis am besten darstellt (also etwa 10, 20, 25, 33.3, 50%). Auf diese Weise wird Ihr Bild gleichmäßig entlang der x-Achse wiederholt, muss aber nicht auf y erscheinen, da es 100% der Elementhöhe einnimmt.

(Wenn umgekehrt die Bild Landschaft (breiter als hoch), würde x 100% betragen und y würde mit 100 und verwendet repeat-y statt repeat-x teilbar sein.)

Dies könnte etwas Herumprobieren nehmen und hängt davon ab, ob das Bild etwas ist, das in Ordnung sein wird, wenn sein Seitenverhältnis etwas aus ist. Vielleicht ist es die Lösung, die Sie brauchen, aber ich denke, es ist einen Versuch wert.