根据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屏幕尺寸上打开浏览器时，图像大小仍然相同。
我不知道我做错了什么来动态缩小图像大小。 谢谢你的帮助。
答案 0 :(得分：3)
img-responsive生成max-width:100%如果您希望图像为全宽（即使它实际上比典型屏幕的宽度小得多），您需要强制它为{{1} }} ...
答案 1 :(得分：2)
您需要的只是宽度：100％。 使用col-xs-12：
<img class='img-responsive col-xs-12' />
或者
<img class='img-responsive' style='width:100%;' />
试试此代码
答案 2 :(得分：1)
在Bootstrap 4中，语法为class="img-fluid"
答案 3 :(得分：1)
将class =“ img-fluid”用于bootstrap 4版本
答案 4 :(得分：0)
您需要将Img标记包装在任何引导类中。就像我用col-lg-4类做div一样。
<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标签包裹
答案 5 :(得分：0)
我遇到了同样的问题。
我意识到我使用的是bootstrap 4（而不是3）。
将它改回bootstrap 3为我修好了。
答案 6 :(得分：0)
重要的是要知道您使用的是哪个版本的引导程序。这是因为用于使图像响应的技术不断地在不同版本之间变化。
我尝试了<img class="img-responsive" src="<your-URL>">和<img class="img-fluid" src="<your-URL>"，但没有一个适合我。
对于Bootstrap V4.5，使用：
<img src="my-URL" class="img-fluid" style="max-width: 100%; height: auto;">
修改<img class="img-fluid" src="<your-URL>"以包括样式，然后它将起作用。这样做的原因是它可以与父元素一起缩放。
您可以阅读Bootstrap documentation on images了解更多信息。