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>

我在 Bootstrap 2.3 上对其进行了测试，它工作正常，谢谢

4

3 回答 3

7

将“img-responsive”类添加到 img...

<img src="img/header.png" class="img-responsive" alt="DayCare" />
于 2013-09-25T13:32:03.580 回答
2

您可以像这样轻松地做到这一点：

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

如果 header 图像的宽度小于屏幕的宽度，则应在样式中添加 max-width 以在大视图中保持 header 的原始宽度。例如，假设header的原始宽度是600px，img应该是这样的：

<img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" />
于 2014-03-07T23:28:47.030 回答
0

同意 Skelly，img-responsive 效果很好。

我尝试使用此代码（删除 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-25T14:04:02.540 回答