Bootstrap: img-responsive vs img-fluid

Я использую загрузчик 3.3.6, и я использую класс IMG-отзывчивый для отзывчивости изображения.

Я нашел новое имя класса img-Fluid, но его нет в версии 3.3.6.

Может кто-нибудь сказать, в чем разница между img-отзывчивым и img-жидкости?

img-responseive просто изменяет размер изображения в соответствии с размером родительского контейнера, который мы можем получить, используя свойство css width: 100% и height: auto. Тогда зачем использовать imag-отзывчивый класс?

Ответы

Ответ 1

img-responsive был в Bootstrap 3, img-fluid находится в Bootstrap 4 начиная с бета-версии.

Снимает дисплей: блок; из .img-жидкости. Адаптивное поведение изображения не зависит от display: block;, поэтому мы можем безопасно удалить его с нашей стороны. Если вам нужен уровень блока, вы можете легко переопределить его в исходном коде или с помощью служебного класса.

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