Bootstrap：img-responsive 与 img-fluid

Question

我正在使用 bootstrap 3.3.6，并且我正在使用

img-responsive

类来实现图像响应。

我找到了一个新的类名

img-fluid

，但是3.3.6版本中没有它。

谁能告诉我

img-responsive

和

img-fluid

有什么区别吗？

img-responsive

只是根据父容器大小调整图像大小，我们可以使用 css 属性

width: 100%

和

height: auto

来实现它。那为什么要使用

image-responsive

类呢？

Answer 1

img-responsive

出现在 Bootstrap 3 中，

img-fluid

出现在 Bootstrap 4 Beta 版本中。

删除显示：块；来自.img-fluid。响应式图像行为不依赖于 display: block;，因此我们可以安全地删除它。如果您需要块级别，您可以轻松地在源代码中或使用实用程序类覆盖它。

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