Bootstrap:img-responsive vs img-fluid [英] Bootstrap: img-responsive vs img-fluid

问题描述

我正在使用 bootstrap 3.3.6 并且我正在使用类 img-responsive 来实现图像响应.

I am using bootstrap 3.3.6 and I am using class img-responsive for image responsiveness.

我发现了一个新的类名 img-fluid，但它在 3.3.6 版本中没有.

I have found a new class name img-fluid, but it's not present in 3.3.6 version.

谁能说出 img-responsive 和 img-fluid 有什么区别?

Can anyone tell what is the difference between img-responsive and img-fluid?

img-responsive 只是根据父容器大小调整图像大小，我们可以使用 css 属性 width: 100% 和 height: auto 来实现它.那为什么要使用 imag-responsive 类呢?

img-responsive just resizes the image as per parent container size which we can achive it using css property width: 100% and height: auto. Then why to use imag-responsive class?

推荐答案

img-responsive 在 Bootstrap 3 中，img-fluid 从测试版开始在 Bootstrap 4 中.

img-responsive was in Bootstrap 3, img-fluid is in Bootstrap 4 since beta version.

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

Removes display: block; from .img-fluid. Responsive image behavior is not dependent on display: block;, so we can safely remove it on our end. Should you need block level, you can easily override that in the source or with a utility class.

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

这篇关于Bootstrap:img-responsive vs img-fluid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！