So erstellen Sie ein responsives Image, das auch in Bootstrap 3 skaliert werden kann

Ich verwende derzeit Twitter Bootstrap 3 und habe ein Problem beim Erstellen eines reaktionsfähigen Images. Ich habe img-responsiveKlasse benutzt. Die Bildgröße wird jedoch nicht vergrößert. Wenn ich width:100%stattdessen benutze max-width:100%, funktioniert es perfekt. Wo ist das Problem? Das 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>

Die reaktionsschnelle Imageklasse von Bootstrap wird max-widthauf 100% festgelegt. Dies begrenzt seine Größe, erzwingt jedoch nicht das Dehnen, um übergeordnete Elemente zu füllen, die größer als das Bild selbst sind. Sie müssten das widthAttribut verwenden, um das Hochskalieren zu erzwingen.

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

Sicher Dinge!

.img-responsive Dies ist der richtige Weg, um Bilder mit Bootstrap 3 reaktionsfähig zu machen. Sie können eine Höhenregel für das Bild hinzufügen, das Sie reaktionsschnell machen möchten, da sich die Breite mit der Verantwortung entlang der Höhe ändert, sie korrigiert und Sie sind da.

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

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

}

Hoffe es hilft PS Die maximale Breite kann alles sein, was Sie mögen

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

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

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>

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

Versuchen Sie Folgendes in Ihrem CSS-Stylesheet:

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

Versuchen Sie dies:

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 Ihrem style.css

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

Ich habe festgestellt, dass Sie die .col-Klasse in das Bild einfügen können, um den Trick auszuführen. Dies gibt ihr jedoch zusätzliche Auffüllung zusammen mit allen anderen Attributen, die mit der Klasse verknüpft sind, wie z. B. float left. Diese können jedoch beispielsweise durch ein No-Auffüllen abgebrochen werden Klasse als Ergänzung.

Ich denke, das Bild ist dann beschädigt. Beispiel: Die Bildgröße beträgt 195 x 146 Pixel.

Es funktioniert in niedrigeren Auflösungen wie Tablets. Wenn Sie eine Auflösung von 1280 x 800 haben, wird diese größer, da auch die Breite 100% beträgt. Möglicherweise ist CSS in Medienabfragen wie Symbolschriftarten die beste Lösung.