Question

请您查看以下代码，让我知道为什么图像在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上测试它并且工作正常，谢谢

Answer 1

将'img-responsive`类添加到img ...

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

Answer 2

您可以使用以下方式轻松完成：

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

如果标题图像的宽度小于屏幕的宽度，则应在样式中添加最大宽度，以便在大视图中保持标题的原始宽度。例如，假设标题的原始宽度为600px，则img应如下所示：

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

Answer 3

同意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

图像在Bootstrap 3中没有响应

3 个答案: