logo标签列表

Bootstrap 3中图片不具有响应式设计

twitter-bootstraptwitter-bootstrap-3
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 上测试过，一切正常，谢谢。

你说Skelly的解决方案不起作用，你能否创建一个JSFiddle来展示你的问题？在这里使用包含Bootstrap的分支：http://jsfiddle.net/SjfzQ/ - Alexander Rechsteiner
3个回答
7
将“img-responsive”类添加到图像中...
<img src="img/header.png" class="img-responsive" alt="DayCare" />
1
嗨Skelly，我通过添加class="img-responsive"更新了代码，但图像仍然没有响应！我是否需要链接到任何响应式的CSS文件，就像我们在bootstrap 2.3上所做的那样？ - Mona Coder
@MonaCoder，你不需要任何额外的文件来使用BS3。但是，如果你的彩虹类是固定宽度等，则可能会导致一些问题。 - Kevin Nelson
2
您可以轻松地使用以下方式进行操作：
<img src="img/header.png" style="width:100%; height:auto; display:block;" />

如果标题图像的宽度小于屏幕宽度，您应该在样式中添加max-width以在大视图中保持标题的原始宽度。例如，假设标题的原始宽度为600px，则img应该如下所示：
<img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" />
在缩小显示尺寸时，图像会自动适应大小。但是，在调整窗口（显示尺寸）大小后，图像仍然停留在缩小的位置。因此，我从样式中删除了 display:block;，现在它可以完美地工作了。希望这能帮助到其他人。 - Thusitha Sumanadasa
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文件

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接