Bootstrap中的img响应不起作用

Question

根据http://getbootstrap.com/css/#images-responsive，我想使用[]使我的图片支持响应式网站>

<img src="..." class="img-responsive" alt="Responsive image">
但是它不起作用。

这是我的代码，

<body>
    <img class="img-responsive" src="images/myImage.png" />
</body>
原始图像尺寸为284x191

当我以1920 * 1080屏幕尺寸打开浏览器时，图像尺寸为284x191

。但是，当我以1280 * 720屏幕尺寸打开浏览器时，图像尺寸仍然相同。

我不知道我在做动态缩小图像时做错了什么。感谢您的帮助。

根据http://getbootstrap.com/css/#images-response，我想通过使用 Responsive image 但是...

Answer 1

4
投票

在Bootstrap 4中，语法为class="img-fluid"

Answer 2

3
投票

您需要的是width：100％。使用col-xs-12：

Answer 3

[img-responsive使max-width:100%成为完整的宽度（即使实际上比典型屏幕的宽度小得多），则需要将其强制为width:100% ...

Answer 4

您需要使用任何引导程序类包装Img标签。正如我在col-lg-4类中所做的那样。

Answer 5

0
投票

我有同样的问题。

Answer 6

对于bootstrap 4版本，使用class =“ img-fluid”