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

回答