Похоже, что в новой версии 3.0 я должен установить имена классов изображения на col-lg-4 col-sm-4 col-4, если изображение является частью div с теми же именами классов, чтобы изображение реагировало со всеми точками останова.
В версии 2 свойства CSS изображений по умолчанию унаследованы от родительских свойств div.
Это правильно?
Загрузка 4
Для Bootstrap 4 используйте Sass (SCSS):
// make images responisve by default
img {
@extend .img-fluid;
}
ответ обновлен для версии 3
Bootstrap 3 имеет специальный класс для адаптивных изображений (установите максимальную ширину на 100%). Этот класс определяется как:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Обратите внимание, тег img получает по умолчанию:
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
Поэтому используйте class="img-responsive", чтобы сделать ваши изображения адаптивными.
Чтобы сделать все изображения адаптивными по умолчанию:
css: добавьте приведенный ниже код под загрузочный css:
img {
display: block;
height: auto;
max-width: 100%;
}
less: добавьте приведенный ниже код в файл mixins.less:
img {
&:extend(.img-responsive);
}
Примечание: требуется версия Less 1.4.0. см.: https://stackoverflow.com/a/15573240/1596547
теги img внутри карусели по умолчанию реагируют
См. также ответ @its-me (https://stackoverflow.com/a/18653778/1596547). Использование вышеуказанного, чтобы сделать все ваши изображения адаптивными по умолчанию, переводит ваши изображения на уровень блокировки. элементы. Элементы уровня блока не допускаются в абзацах (<p>), см.: https://stackoverflow.com/a/4291515/1596547
Насколько я понимаю, различие между блочными и встроенными элементами заменено более сложным набором категорий контента. См. также: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level. Таким образом, в HTML5 тег p может содержать любой элемент фразировки, смешанный с обычными символьными данными. (см.: http://www.w3.org/TR/html-markup/p.html) Тег img является таким фразовым элементом. Значение по умолчанию тега img для свойства отображения действительно равно inline-block. Изменение свойства display на block не нарушает ни одно из предыдущих правил.
Элементы уровня блока (display:block) занимают все доступное пространство своего родителя, что кажется именно тем, что вы ожидаете от адаптивных изображений. Таким образом, установка display: block; кажется разумным выбором, который следует предпочесть объявлению inline-block.
Изображения внутри элементов p, для которых требуется inline-block, как предлагает @its-me (https://stackoverflow.com/a/18653778/1596547) может вообще не реагировать.
img { @extend .img-responsive; }
- person jgillich; 22.07.2015
Отличное предложение от @BassJobsen, но я бы использовал display: inline-block; вместо display: block;, так как это кажется более семантичным 1 (что означает, что вы можете быть более уверены, что не ошибетесь где-то еще).
Итак, моя будет выглядеть так:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Пожалуйста, дайте мне знать, если я ошибаюсь. :)
[1]: во-первых, изображения почти всегда помещаются в блочный элемент, если это вариант использования; и опять же, мы также используем изображения в таких элементах, как абзацы (p), где элемент inline-block был бы более подходящим, чем элемент block.
<p>. Установите встроенный блок отображения, возможно, он чувствует себя лучше, но это не так. Это должно быть причиной того, что Bootstrap теперь не делает изображения отзывчивыми по умолчанию.
- person Bass Jobsen; 09.09.2013
Попал сюда после попытки выяснить, безопасно ли применять img-responsive ко всем изображениям.
Ответ @its_me заставил меня подумать, что применять это для изображений под элементом p небезопасно.
Это не похоже на то, что думает команда начальной загрузки.
Вот почему изображения не реагируют по умолчанию в bootstrap3:
Подводя итог, можно сказать, что он ломает массу ничего не подозревающих сторонних виджетов (включая Google Maps), которые по понятным причинам не ожидают, что изображения в них будут принудительно изменены на другую ширину. Вот почему мы отказались от подхода Bootstrap v2 «изображения реагируют по умолчанию» в Bootstrap v3 в пользу явного класса .img-responsive.
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107
.img-responsive- person Schmalzy schedule 29.07.2013