Hinzufügen eines Banner in voller Breite und damit bootstrap reaktionsfähig

Ich versuche, eine Bootstrap-Vorlage zu ändern, um ein voller Länge 1200 px Banner an der Spitze, anstelle der kleineren 120 x 60 Bilder/logo-company.png hinzuzufügen Logo, das dort auf der ursprünglichen Site ist.Hinzufügen eines Banner in voller Breite und damit bootstrap reaktionsfähig

Ich habe versucht, vergeblich, aber ich würde gerne in der Lage sein, dieses größere Banner perfekt für die Desktop-Ansicht zu setzen, während es auf mobilen Geräten reagieren.

Ich nehme an, dass das ursprüngliche Logo so klein war, dass es keine Codeaufrufe benötigt, um es reaktionsfähig zu machen.

Würde jemand freundlich genug sein, einen Blick darauf zu werfen und zu sehen, ob sie den nötigen HTML- und/oder CSS-Code liefern können, um dies für mich zu erreichen.

ursprüngliche Seite. http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html

Meine Demo http://dagrafixdesigns.com/2017/industrial-darker/index.html

Quelle

2016-12-09 DA-G-GURU

Haben Sie versucht, die img-responsive Klasse auf das Bild Banner anwenden? – Enijar

Gib der Kopfzeile ein Hintergrundbild – Benneb10

In deiner Demo kannst du nicht einfach einen Teil des Bootstrap Grids kommentieren. Die Änderungen sind ein wenig komplexer. – Banzay

Wenn Hintergrundbild funktioniert nicht für Sie hier eine einfache Lösung:

<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;"> 
     <!-- container-fluid is the same as container but spans a wider viewport, 
    it still has padding though so you need to remove this either by adding 
    another class with no padding or inline as I did below --> 
    <div class="container-fluid" style="padding: 0px;"> 
     <div class="row"> 
     <!-- You originally has it set up for two columns, remove the second 
    column as it is unneeded and set the first to always span all 12 columns 
    even when at its smallest (xs). Set the overflow to hidden so no matter 
    the height of your image it will never show outside this div--> 
     <div class="col-xs-12"> 
      <a class="navbar-brand logo" href="index.html"> 
     <!-- place your image here --> 
       <img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;"> 
      </a> 
     </div>  
     </div> 
    </div> 
</div>

Quelle

2016-12-12 13:46:33 Benneb10

Bitte schauen Sie sich die Seite an, da ich Ihren Code hinzugefügt habe, wir sind nah dran, aber immer noch etwas los. Ich weiß, es gibt einige Probleme mit der Auffüllung, wo Sie gelb, nicht sicher über die Höhe Problem auf Banner obwohl. –

Das Padding stammt aus der style.css-Kopfzeile. Entferne dies inline oder im Stylesheet, wenn du etwas hinzugefügt hast, das du hinzugefügt hast. Setze auch die Höhe für diese Klasse und entferne den Überlauf: versteckt vom col-xs-12 und füge ihn zu dieser Klasse hinzu (immer Kopfzeile) - siehe Edit – Benneb10

kannst du bitte den Link jetzt ansehen? Ich habe Ihrem Code ein Markup für das Logo der Marke navbar hinzugefügt (float properties) und ein paar Inline-Elemente in der Kopfzeile entfernt, die Sie hatten ...... und das scheint es zu tun, fühle ich .... .le mich wissen, ob dies korrekt ist und reagiert usw., wenn Sie bitte können. Keine Eile –

Sie können für Kopfhintergrundbild einstellen und entfernen/das Logo Bild verstecken.

#header-row { 
    background-image: url(../images/logo-company.png); 
}

Quelle

2016-12-09 16:41:07 makshh

Hinzufügen eines Banner in voller Breite und damit bootstrap reaktionsfähig

Antwort

Verwandte Themen