我正在编写以下代码。为什么图像在 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>
我在 Bootstrap 2.3 上进行了测试，运行良好。
将 'img-responsive` 类添加到 img...
<img src="img/header.png" class="img-responsive" alt="DayCare" />
您可以像这样轻松完成：
<img src="img/header.png" style="width:100%; height:auto; display:block;" />
如果标题图片的宽度小于屏幕宽度，则应在样式中添加 max-width，以在大视图中保持标题的原始宽度。例如，假设 header 的原始宽度是 600px，img 应该是这样的：
<img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" />
同意 Skelly 的观点，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