it-swarm.com.de

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?

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