Bootstrap 4 中没有图像响应答案

【问题标题】：No img-responsive in Bootstrap 4Bootstrap 4 中没有图像响应
【发布时间】：2016-04-21 01:24:35
【问题描述】：

我刚刚下载了 Bootstrap 4 alpha 2 的源代码，但在其中找不到 img-responsive 类。它存在于 Bootstrap 3 源代码中，我可以使用 Notepad++ 找到它，但在 Bootstrap 4s bootstrap.css 中的 dist 文件夹中它不存在。

这是怎么回事？？

【问题讨论】：

标签： image twitter-bootstrap

【解决方案1】：

您也可以使用与.img-fluid 相同的.img-thumbnail，但也可以为图像提供圆角1px 边框外观。

看结果：Image thumbnails

【讨论】：

【解决方案2】：

Boostrap 4 正在使用.img-fluid 类。

更多参考Boostrap changes for image

【讨论】：

【解决方案3】：

引导程序 3： .img-responsive

引导程序 4： .img-fluid

如Bootstrap 4 Images:

Bootstrap 4 中的图像使用 .img-fluid 进行响应。最大宽度： 100%；和高度：自动；应用于图像，使其缩放与父元素。

<img class="img-fluid" src="" alt=""> //This will make your image responsive

【讨论】：

【解决方案4】：

在 Bootstrap 4 中，您可以使用 class="img-fluid"。

这是解释：

Bootstrap 中的图像使用 .img-fluid 进行响应。最大宽度：100%；和高度：>自动；应用于图像，使其随父元素缩放。

这是建议的代码： <img src="..." class="img-fluid" alt="Responsive image">

【讨论】：

【解决方案5】：

使用 img-fluid 类而不是 img-responsive

见docs

【讨论】：

这个答案与接受的答案有何不同？如果有的话，它会添加什么？

【解决方案6】：

来自Bootstrap 4 documentation：

Bootstrap 中的图像使用 .img-fluid 进行响应。最大宽度：100%；和高度：自动；应用于图像，使其随父元素缩放。

【讨论】：

所以我们应该使用img-responsive而不是img-fluid?
没错，它应用的样式与 v3 中的 img-responsive 完全相同。
那么，如果它做同样的事情，他们为什么要改变它，他们只是白白做了一个突破性的改变？？
根据alpha 2 changelog：“将 .img-responsive 重命名为 .img-fluid 以避免将来对各种响应式图像解决方案造成混淆。”

【解决方案7】：

如果您使用的是 Bootstrap 4 alpha 2，您似乎需要使用新的类 img-fluid 而不是 img-responsive。看看：http://v4-alpha.getbootstrap.com/content/images/

【讨论】：