Vollbild Hintergrundbild für col - * - * im Bootstrap

Question

Ich habe bereits einige Fragen zu diesem Thema gefunden, aber keine von ihnen konnte mir wirklich helfen, mein Problem zu lösen.

Ich mag eine einfache Bootstrap Gitter wie folgt aussehen bauen:

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-8"> Some Text </div> 
    <div class="col-sm-4"> 
     <img src="..." alt="Full Size Background Image" /> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <img src="..." alt="Full Size Background Image" /> 
    </div> 
    <div class="col-sm-8"> Some Text </div> 
    </div> 
</div> 

Die col-sm-4-DIVs sollte in voller Größe Hintergrundbild mit der gleichen Höhe wie der Text und ohne Polsterung enthalten.

Hier ist ein Foto von dem, was ich meine. Ich möchte das Hintergrundbild in den roten Bereich decken:

See Example

Irgendwelche Ideen, wie das zu tun?

Vielen Dank für Ihre Hilfe !!!

Answer 1

Erste Option Sie min-width:100% in Ihrem img Tag einstellen:

img { 
    min-width: 100%; 
} 

oder zweite Option, können Sie setze das Bild als Hintergrund und setze es in das gewünschte div:

<div class="col-sm-4 full-img"> 

Und die CSS:

.full-img { 
    background-image: url("...."); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

Answer 2

Verwendung CSS, um das Hintergrundbild auf der Säule

<div class="row"> 
    <div class="col-sm-4" style="background-image:url('.....')"> 
     content...... 
    </div>