IMG响应在引导不起作用

<img src="..." class="img-responsive" alt="Responsive image">

支持响应网站，但它无法正常工作。

这里是我的代码，

<body> 
    <img class="img-responsive" src="images/myImage.png" /> 
</body>

原始图像大小为284x191

当我打开1920×1080的屏幕尺寸浏览器，图像尺寸为284x191。但是，当我在1280 * 720屏幕尺寸下打开浏览器时，图像尺寸仍然相同。

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

你需要将你的Img标签包装到任何引导类中。正如我在col-lg-4课上做的那样。

<div class="col-lg-4"> 
    <img class="img-responsive" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" /> 
</div>

或

<img class="img-responsive col-lg-4" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />

如果不是div标签包裹

2016-02-25 08:36:59

所有你需要的是宽度：100％。使用COL-XS-12：

<img class='img-responsive col-xs-12' />

或者

<img class='img-responsive' style='width:100%;' />

试试这个代码

2016-02-25 08:40:16 Gopalakrishnan

img-responsive使得max-width:100%如果你想要的形象是全宽（即使它实际上要小得多比典型屏幕的宽度），你需要强制它成为width:100% ...

2016-02-25 12:39:02 ZimSystem

我有同样的问题。

我意识到我使用引导程序4（而不是3）。

将其更改回引导程序3为我修复了它。

2018-01-25 05:34:51

In Bootstrap 4的语法是class="img-fluid"

2018-01-25 09:20:23 Michael

回答