Изображения не изменяются в зависимости от размера столбца Bootstrap

Моя цель - отобразить 4 изображения в строке. Код ниже:

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

И я также ожидаю, что изображение будет изменено на основе стиля столбца из Bootstrap, но то, что я получаю, перекрывает полные изображения.

Есть ли смысл в том, что происходит?

Ответы

Ответ 1

Попробуйте добавить это в таблицу стилей:

img {
    width: 100%;
}

Обновление:. В качестве альтернативы (как указано в комментариях ответа от @JasonAller), вы можете добавить class="img-responsive" к каждому элементу img. Для этого применяются max-width: 100%; и height: auto;, чтобы он хорошо масштабировался для родительского элемента. Подробнее см. Документы Bootstrap.

Ответ 2

Иногда при динамическом содержимом, когда у вас нет контроля над тем, что пользователи вставляют, class= "img-responsive" не будет работать. И "ширина: 100%" для каждого изображения также сложна. Поэтому я использую:

img {max-width: 100%;}

Ответ 3

С Bootstrap 4 вы должны использовать использование class= "img-fluid", class= "img-responsive" будет работать в 3.x.

Ответ 4

Помните, что в бутстрап-колонках также есть отступы; это может быть неожиданным.

Следующее:

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

работал у меня.