圖像在Bootstrap 3中沒有響應

您可以看看下面的代碼，並讓我知道爲什麼圖像在Bootstrap 3中不起作用？圖像在Bootstrap 3中沒有響應

<!DOCTYPE html> 
<html> 
<head> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
<!-- Optional theme --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> 
<!--My Style --> 
<link rel="stylesheet" href="css/Style.css"> 
</head> 
<body> 
<div class="container"> 
<div class="rainbow"> 
<img src="img/header.png" alt="DayCare" /> 
</div> 
</div> 

<!-- Latest compiled and minified JavaScript --> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
</body> 
</html>

我測試它引導2.3，它工作正常，謝謝

來源

2013-09-25 Mona Coder

你說，在斯凱利解決方案不起作用，你可以創建一個使用的jsfiddle您的問題？在這裏用Bootstrap包括這個：http://jsfiddle.net/SjfzQ/ –

添加「IMG-responsive`類的IMG ...

<img src="img/header.png" class="img-responsive" alt="DayCare" />

來源

2013-09-25 13:32:03 ZimSystem

嗨，Skelly，我通過添加class =「img-responsive」更新了代碼，但圖像仍然不起作用。我是否必須鏈接到任何responsive.css文件，比如我們在bootstrap 2.3上做了什麼？ –

@MonaCoder，你不需要BS3的任何額外的文件。然而，如果它的寬度是固定的，那麼你的彩虹類可能會搞砸了。 –

同意斯凱利，img-反應良好。

我試着用這段代碼（Style.css刪除），工作正常。

<!DOCTYPE html> 
<html> 
<head> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
<!-- Optional theme --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> 
</head> 
<body> 
<div class="container"> 
<div class="rainbow"> 
<img class="img-responsive" src="bootstrap/resources/img/charpente/toulenne/IMGP0110.JPG" alt="DayCare" /> 
</div> 
</div> 

<!-- Latest compiled and minified JavaScript --> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
</body> 
</html>

嘗試刪除您的style.css

來源

2013-09-25 14:04:02 bobybx

你可以很容易利用這樣做：

<img src="img/header.png" style="width:100%; height:auto; display:block;" />

如果頭圖像的寬度大於屏幕的寬度，你應該在樣式中添加最大寬度以保持大視圖中標題的原始寬度。例如，假設頭的原始寬度爲600像素，IMG應該是這樣的：

<img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" />

來源

2014-03-07 23:28:47

此後，當縮小顯示尺寸時，圖像圖像作爲響應。但是在重新調整窗口大小後，減少展示位置。所以我從style和其作品中完美地刪除了'display：block'。希望這可以幫助某人。 –

圖像在Bootstrap 3中沒有響應

回答

相關問題