CSS Linie, die Bildschirm

Question

erweitern off werde ich ein Bild, das Linien auf beiden Enden davon, wie diese hat:

Ich versuche, die Linie unendlich so egal, wie viel ich herauszoomen Es sieht so aus, als ob die Linie vom Ende des Bildschirms kommt, ohne dass sich die Größe des Bildes ändert.

Ich weiß, dass ich eine weiße Linie mit repeat-x machen kann, aber ich habe Probleme damit, das übergroße Div den Bildschirm überlappen zu lassen, ohne das Bild zu beeinflussen. Ich benutze Bootstrap.

Hier ist mein Code für das Bild

<div class="row"> 
       <div class="col-xl-12 hscentertext" style=""> 
       <img src="assets/img/25k.png" class="img-fluid center-block text-xl-center" alt="Responsive image"> 
       <!-- <canvas id="canvas" class="fullonly" width="800" height="133" style="background-color:#D32225"></canvas> --> 
       </div> 
      </div> 

Kann jemand bitte helfen mit, wie ich diesen Effekt erreichen kann?

Answer 1

Sie können diese mit 110% auf Ihre Breite erreichen, etwa so:

img { 
    position: absolute; 
    width:110% 
    overflow: hidden; 
    } 

Answer 2

Mein ideea ist Ihnen ein Bild zu beschneiden, ohne Grenze. Nach diesem Einsatz CSS:

.col-xl-12.hscentertext { 
    width: 100%; 
    border-bottom: 1px solid #fff; 
} 
.img-fluid.center-block.text-xl-center { 
    margin-bottom: -1px; 
} 

Answer 3

Sie Ihr Bild in 4 vertikalen Teile schneiden kann:

1) leer roten Raum + paar Pixel gerundeter Kopf der weißen horizontalen Linie

2) vertikale Linie von 1 Pixel Breite für die Wiederholung der Zeile in bg

3) Hauptteil mit logo

4) leer roten Raum + einige Pixel von gerundeten Schweif weiße horizontale Linie

dann geteilt Sie Ihr Markup in 5 vertikalen divs:

1,3,5 mit fester Breite und zentriert Hintergrund-Bild

und 2,4 - für "repeat-x" 1-Pixel-bg mit Breite: calc (50% - # (Logo + Kopf + Schwanz)/2 # px); Wert innerhalb ## Berechnen Sie sich