wake-up-neo.com

Die Größe der Bilder wurde nicht anhand der Größe der Bootstrap-Spalte geändert

Mein Ziel ist es, 4 Bilder pro Zeile anzuzeigen. Code unten:

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>                                                                                    
</div>

Ich erwarte auch, dass die Größe der Bilder aufgrund des Spaltenstils von Bootstrap geändert wird, aber ich bekomme überlappende vollständige Bilder.

Irgendwelche Ahnung, was los ist?

cssimagetwitter-bootstraptwitter-bootstrap-3
38
JackTheKnife

Versuchen Sie, dies Ihrem Stylesheet hinzuzufügen:

img {
    width: 100%;
}

Update: Alternativ (wie in den Kommentaren dieser Antwort von @JasonAller ausgeführt) können Sie jedem img-Element class="img-responsive" hinzufügen. Dies gilt max-width: 100%; und height: auto; für das Bild, so dass es gut zum übergeordneten Element passt. Weitere Informationen finden Sie in der Datei Bootstrap docs .

82
henrywright

Mit Bootstrap 4 müssen Sie use class = "img-fluid" verwenden. Class = "img-responsive" funktioniert in 3.x.

19
Ray Koren

Wenn Sie bei dynamischen Inhalten nicht die Kontrolle darüber haben, was Benutzer eingeben, funktioniert class = "img-responsive" manchmal nicht. Und "width: 100%" für jedes Bild ist auch knifflig. Also verwende ich:

img {max-width: 100%;}
6
Nookeen

Hüten Sie sich vor den Bootstrap-Spalten, das kann unerwartet sein. 

Folgende:

div class="col-sm-6" style="padding:0"

arbeitete für mich.

1
Katia Punter

Wenn Sie möchten, können Sie das width-Tag im html-Element verwenden, zum Beispiel:

    <img width="60%" src="...">

Ich finde es nützlicher, da Sie mit dem Prozentsatz spielen können, bis Sie die gewünschte Größe haben.

0
Juano