Bootstrap:img-responsive vs 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来实现它.那为什么要使用想象敏感的课程呢？

Answer 1

img-responsive在Bootstrap 3中,img-fluid自测试版以来就在Bootstrap 4中.

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

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