Responsive Images - Bootstrap

Question

Ich benutze das Bootstrap-Framework, ich bin auf der Suche nach 3 Bildern, wie in der JSFiddle-Link unten in einem responsive Manor, wenn die Fenstergröße ändert/Monitor-Größe ist zu klein, um die volle Größe Bilder anzuzeigen . Es ist wichtig, dass die Bilder auf der gleichen Linie bleiben (wenn möglich) und keine Abstände dazwischen.

<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png"> 

Dank

https://jsfiddle.net/mztyoy7q/

Answer 1

eine Klasse, um die Image-Tags hinzufügen, und nicht zu vergessen die Bootstrap hinzuzufügen! So stellen Sie sicher, dass Sie den Bootstrap-Link, und Sie kostenlos CDN verwenden können:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 

und fügen Sie die Klasse

class="img-responsive" 

auf Ihre img-Tags.

JSFiddle

EDIT: Wenn Sie die Bilder auf der gleichen Linie wollen, nur ein paar divs erstellen. erster, schafft eine Mutter div,

<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;"> 
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
</div> 

Dieses div Element mit 100% Breite rot sein wird, und die Höhe automatisch Größenänderung. Dann fügen Sie divs zwischen jedem Bild mit dem Stil float:left; wie so:

<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;"> 
    <div style="float:left;"> 
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png"> 
    </div> 
    <div style="float:left;"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    </div> 
    <div style="float:left;"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    </div> 
</div> 

Hier ist die aktualisierte JSFiddle Wenn dies funktioniert, lass es mich wissen!

Answer 2

Wickeln Sie Ihre Bilder in einige Raster/Spalten ein (z. B. .col-*), und füllen Sie diese Bilder so aus, dass sie 100% des verfügbaren Platzes (.img-responsive) ausfüllen. Dies ist eine saubere und elegante Art und Weise, es zu tun, mit nur Bootstrap:

<div class="row"> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png"> 
    </div> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    </div> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    </div> 
</div> 

https://jsfiddle.net/tvv89L1j/1/

über Räume zu entfernen, wäre der einfachste Weg, nur Ihre eigenen Stile hinzufügen wird padding zu überschreiben, die Bootstrap erstellt. Sie müssen padding-left und padding-right für Spalten auf 0 setzen (Sie können natürlich sehen, woher diese Auffüllung im Browser-Inspektor stammt).