in voller Höhe Bild

Question

Ich bin derzeit den Aufbau einer Website und ich in einigen Fragen einander Bildern und Text mit Seiten leite:

<div class='banner' style='background-color: #efefef'> 
    <div class='container-fluid'> 

    <div class="row-fluid"> 

     <div class='col-sm-8'> 
     <div class='inner'> 
      <div class='title'>Travel Bezaff</div> 
      <div class='subtitle'>Like nothing you've ever experienced</div> 
      <div class="paragraph" style="text-align: center"> 
      From the bustling streets of Casablanca to the dynamic capital city of Rabat to the labryinth like medina of the old city of Fez, prepare yourself for a journey into one of the most culturally diverse regions. 
      </div> 
     </div> 
     </div> 

     <div class='col-sm-4'></div> 
    </div> 

    </div> 
</div> 

Ich habe zwei Spalten in einer Zeile, eine für Inhalt und eine für ein Bild, das sich auf der rechten Seite der Seite befinden würde. Der Inhalt befindet sich, wie Sie sehen können, bereits auf der linken Seite des Containers.

Ich frage mich nur, wie man beide Spalten von gleicher Höhe machen. Das Bild sollte die Höhe für eine größere Bildschirmgröße vollständig ausfüllen, aber es ist sicherlich akzeptabel, wenn die beiden Spalten übereinander gestapelt werden, wenn sie auf kleinere Bildschirmgrößen verkleinert werden. Wie kann ich das schaffen?

Answer 1

In Ordnung, also habe ich ein paar verschiedene Möglichkeiten, die Sie erreichen können (je nachdem, was Sie eigentlich suchen, da der Screenshot oben nicht klar ist).

Hier ist ein jsfiddle zeigt, wie dies erreicht werden kann, wenn Sie Ihr Bild wollen die richtige Seitenverhältnis beibehalten:

http://jsbin.com/xedijomuce/1/edit?css,output

Und hier ist eine andere jsfiddle zeigt, wie dies erreicht werden kann, wenn Sie Ihr Bild wollen um sicherzustellen,

http://jsbin.com/nozagunoxo/1/edit?css,output

im Grunde ist es nutzt die flex Eigenschaft, dass die: auf die volle Höhe des Monitors immer strecken zwei Spalten haben immer die gleiche Größe. Dann habe ich sie beide vertikal ausgerichtet mit align-items: center, so dass der Text immer zentriert wird, unabhängig davon, wie groß das Fenster wird.

.row-fluid { 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
} 

Ich werde ein letztes Beispiel bieten in Kürze display: table-cell mit, falls Sie hoffen flex-box zu vermeiden.

Edit: wie versprochen, hier ist eine Möglichkeit, einen ähnlichen Effekt mit display: table-cell zu erreichen. Dies ist die am meisten unterstützte Lösung, erfordert jedoch ein wenig mehr Arbeit. Viel Glück, lassen Sie mich wissen, wenn Sie Fragen haben:

http://jsbin.com/mifupiwexi/1/edit?css,output

Answer 2

Nach ist die Lösung, wenn es irgendein Problem gibt, zu fragen sich frei fühlen: -

ich Ihren Code ein wenig aktualisiert: -

<div class = 'banner' style = 'background-color: #efefef'> 
      <div class = 'container-fluid'> 

       <div class = "row-fluid"> 

        <div class = 'col-sm-8' style="height:100px;"> 
         <div class = 'inner'> 
          <div class = 'title'>Travel Bezaff</div> 
          <div class = 'subtitle'>Like nothing you've ever experienced</div> 
          <div class = "paragraph" style = "text-align: center"> 
           From the bustling streets of Casablanca to the dynamic capital city of Rabat to the labryinth like medina of the old city of Fez, prepare yourself for a journey into one of the most culturally diverse regions. 
          </div> 
         </div> 
        </div> 

        <div class = 'col-sm-4' style="height:100px;"> 
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="height:100%;"> 
</div> 
       </div> 

      </div> 
     </div> 

Sie müssen nur auf die eine bestimmte Höhe setzen beide Spalten und setzen 100% Höhe zum Bild. Zum Beispiel - ich habe ein Dummy-Bild im Code hinzugefügt, Sie können das sehen.