В настоящее время я использую 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
для принудительного масштабирования.
.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 внутри медиа-запросов, таких как значки шрифтов.