web-dev-qa-db-de.com

Dehnen Sie das Bild auf Bootstrap mit voller Containerbreite

Ich habe ein Image, das 1300px breit ist. Mit bootstrap möchte ich, dass dieses Image die volle Breite meines Containers ausfüllt, der auf 1300px eingestellt ist. Ich erstelle eine Zeile, gebe volle 12 Spalten an und füge dann das Image mit einer Klasse von responsivem Image hinzu. Mit diesem Setup bekomme ich die Ausgabe unten.

 enter image description here

Ich möchte, dass sich mein Bild bis zu dem Punkt erstreckt, an dem sich mein Bild in meinem Inhalt befindet. Hier ist mein Code. 

  <div class="row">
    <div class="container">
      <div class="col-md-12">
        <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
      </div>
    </div>
  </div>

Das Bild ist auf 100% Breite eingestellt, also nicht sicher, warum es den Behälter nicht füllt.

8
pocockn

Prüfen Sie, ob das Problem dadurch gelöst wird:

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
  </div>
</div>

CSS

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

Die Css-Klasse no-padding überschreibt die Standardauffüllung des Bootstrap-Containers.

Vollständiges Beispiel hier .

18
sQer

In Bootstrap 4.1 ist die Klasse w-100 zusammen mit img-fluid für Bilder erforderlich, die kleiner als die zu streckende Seite sind:

<div class="container">
  <div class="row">
    <img class='img-fluid w-100' src="#" alt="" />
  </div>
</div>

siehe geschlossene Ausgabe: https://github.com/twbs/bootstrap/issues/20830

(Seit 2018-04-20 ist die Dokumentation falsch: https://getbootstrap.com/docs/4.1/content/images/ besagt, dass img-fluid max-width: 100% gilt, height: auto ; "aber img-fluid löst das Problem nicht und fügt diese Stilattribute nicht manuell mit oder ohne Bootstrap-Klassen zum img-Tag hinzu.)

17
poikilos

Die Klasse container hat 15px links und rechts aufgefüllt. Wenn Sie diese Auffüllung entfernen möchten, verwenden Sie Folgendes, da die Klasse row -15px links und rechts hat.

<div class="container">
  <div class="row">
     <img class='img-responsive' src="#" alt="" />
  </div>
</div>

Codepen: http://codepen.io/m-dehghani/pen/jqeKgv

2
Mehdi Dehghani

Vor allem, wenn die Größe des Bildes kleiner als der Container ist, löst nur die Klasse "img-fluid" Ihr Problem nicht. Sie müssen die Breite des Images auf 100% setzen, dafür können Sie die Bootstrap-Klasse "w-100" . verwenden. Beachten Sie, dass die Klassen "container-fluid" und "col-12" links und rechts auffüllen Die 15px- und "Row" -Klasse setzt den linken und rechten Rand standardmäßig auf "-15px". Stellen Sie sicher, dass Sie sie auf 0 setzen.

Hinweis: "Px-0" ist eine Bootstrap-Klasse, die die linke und rechte Auffüllung auf 0 und setzt
"mx-0" ist eine Bootstrap-Klasse, die den linken und rechten Rand auf 0 setzt 

P.S. Ich verwende Bootstrap 4.0 Version. 

 <div class="container-fluid px-0">
        <div class="row mx-0">
            <div class="col-12 px-0">
            <img src="images/top.jpg" class="img-fluid w-100">
            </div>
        </div>
    </div>
0
user11023470