web-dev-qa-db-fra.com

Images non redimensionnées en fonction de la taille de la colonne Bootstrap

Mon objectif est d'afficher 4 images par ligne. Code ci-dessous:

<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>

Et j'espère aussi voir les images redimensionnées en fonction du style de colonne de Bootstrap, mais ce que j'obtiens est un chevauchement des images.

Une idée de ce qui se passe?

cssimagetwitter-bootstraptwitter-bootstrap-3
38
JackTheKnife

Essayez d'ajouter ceci à votre feuille de style:

img {
    width: 100%;
}

Update: Comme alternative (comme indiqué dans les commentaires de cette réponse par @JasonAller), vous pouvez ajouter class="img-responsive" à chaque élément img. Ceci applique max-width: 100%; et height: auto; à l'image afin qu'elle s'adapte bien à l'élément parent. Voir le Documents d'amorçage pour plus d'informations.

82
henrywright

Avec Bootstrap 4, vous devez utiliser class = "img-fluid", class = "img-responsive" fonctionnera sous 3.x.

19
Ray Koren

Parfois, sur un contenu dynamique, lorsque vous n'avez aucun contrôle sur ce que les utilisateurs insèrent, class = "img-responsive" ne fonctionnerait pas. Et «largeur: 100%» pour chaque image est également délicat. Donc j'utilise:

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

Attention, les colonnes bootstrap sont également rembourrées. cela peut être inattendu. 

Le suivant:

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

a travaillé pour moi.

1
Katia Punter

Si vous le souhaitez, vous pouvez utiliser la balise width dans l'élément html, par exemple:

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

Je le trouve plus utile, car vous pouvez jouer avec le pourcentage jusqu'à obtenir la taille souhaitée.

0
Juano