Как создать адаптивное изображение, которое также масштабируется в Bootstrap 3

В настоящее время я использую twitter bootstrap 3, и у меня возникла проблема с созданием адаптивного изображения. Я использовал img-responsiveкласс. Но размер изображения не увеличивается. Если я использую width:100%вместо, max-width:100%то он отлично работает. В чем проблема? Это мой код:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Класс адаптивного изображения Bootstrap установлен max-widthна 100%. Это ограничивает его размер, но не заставляет его растягиваться, чтобы заполнить родительские элементы больше, чем само изображение. Вам нужно будет использовать widthатрибут для принудительного масштабирования.

http://getbootstrap.com/css/#images-responsive

Конечно!

.img-responsive - это правильный способ сделать изображения адаптивными с помощью bootstrap 3. Вы можете добавить какое-то правило высоты для изображения, которое хотите сделать адаптивным, потому что с ответственностью ширина изменяется по высоте, исправьте это и готово.

Не уверен, что это еще помогает ... но мне пришлось проделать небольшой трюк, чтобы увеличить изображение, но сохраняя его отзывчивость.

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

Надеюсь, это поможет PS Максимальная ширина может быть какой угодно

Если установка фиксированной ширины изображения невозможна, вот альтернативное решение.

Наличие родительского div с display: table и table-layout: исправлено. Затем установите изображение для отображения: table-cell и max-width на 100%. Таким образом, изображение будет соответствовать ширине своего родителя.

Пример:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

Скрипка: http://jsfiddle.net/5y62c4af/

Попробуйте следующее в своей таблице стилей CSS:

.img-responsive{
  max-width: 100%;
  height: auto;
}

Попробуйте сделать так:

1) В вашем index.html

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) В вашем style.css

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

Я обнаружил, что вы можете поместить класс .col на изображение, и это поможет - однако это дает ему дополнительное заполнение вместе с любыми другими атрибутами, связанными с классом, такими как float left, однако их можно отменить, скажем, например, без заполнения класс как дополнение.

Я думаю, изображение чем повреждено. Пример: размер изображения 195px X 146px.

Он будет работать внутри более низких разрешений, например планшетов. Когда у вас разрешение 1280 X 800, оно будет больше, так как ширина также составляет 100%. Возможно, лучшим решением будет CSS внутри медиа-запросов, таких как шрифты иконок.