web-dev-qa-db-ger.com

So erstellen Sie ein responsives Image, das sich auch in Bootstrap 3

Ich verwende derzeit Twitter bootstrap 3 und habe ein Problem beim Erstellen eines reaktionsfähigen Bildes. Ich habe die Klasse img-responsive Verwendet. Aber die Bildgröße wird nicht vergrößert. Wenn ich Verwenden Sie width:100% anstelle von max-width:100%, dann funktioniert es einwandfrei. Wo liegt das Problem? Dies ist mein Code:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>
96
user2796803

Die responsive Image-Klasse von Bootstrap setzt max-width auf 100%. Dies begrenzt die Größe, erzwingt jedoch keine Dehnung, um übergeordnete Elemente auszufüllen, die größer als das Bild selbst sind. Sie müssten das width -Attribut verwenden, um die Hochskalierung zu erzwingen.

http://getbootstrap.com/css/#images-responsive

83
isherwood

Sicher Dinge!

.img-responsive ist der richtige Weg, um Bilder mit bootstrap 3) ansprechbar zu machen. Sie können eine Höhenregel für das Bild hinzufügen, das ansprechbar gemacht werden soll, da sich mit der Verantwortung die Breite entlang der Höhe ändert, es repariert und da bist du ja.

18
Omar El Don

Ich bin mir nicht sicher, ob es dir noch hilft ... aber ich musste einen kleinen Trick machen, um das Bild größer zu machen, aber es ansprechend zu halten

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

Hoffe es hilft P.S. Die maximale Breite kann beliebig sein

8
Gil

Wenn das Festlegen einer festen Breite für das Bild nicht möglich ist, finden Sie hier eine alternative Lösung.

Ein übergeordnetes Div mit Anzeige: Tabelle & Tabellenlayout: behoben. Stellen Sie dann das anzuzeigende Bild ein: Tabellenzelle und maximale Breite auf 100%. Auf diese Weise wird das Bild an die Breite des übergeordneten Elements angepasst.

Beispiel:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

Fiddle: http://jsfiddle.net/5y62c4af/

7
Bruno Fondevila

Versuchen Sie es so:

1) In Ihrer index.html

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) In Ihrer style.css

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}
3
user3941146

Versuchen Sie Folgendes in Ihrem CSS-Stylesheet:

.img-responsive{
  max-width: 100%;
  height: auto;
}
3
Xinoon

Ich fand heraus, dass Sie die .col-Klasse in das Bild einfügen können, um den Trick zu machen - dies gibt ihm jedoch zusätzliche Auffüllmöglichkeiten zusammen mit allen anderen Attributen, die der Klasse zugeordnet sind, wie z. B. Float Left Klasse als Ergänzung.

1
MikeyC