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

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

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

Уверенные вещи!

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

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

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

}

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

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

Наличие родительского div с отображением: таблица и таблица-макет: исправлены. Затем установите изображение для отображения: 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>

Fiddle: 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) В вашем стиле .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, однако их можно отменить, скажем, например, нет класса заполнения в качестве добавления.

Использование {max-width: 100%} будет работать отлично, но с учетом образа лучше реагировать на корректировку изображения в соответствии с разрешением экрана и соотношением сторон изображения, никогда не будет хорошим подходом к растягиванию изображения.

Я думаю, что изображение повреждено. Пример: размер изображения составляет 195 пикселей x 146 пикселей.

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