twitter-bootstrap 图像在 Bootstrap 3 中没有响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19005924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image Is Not Responsive in Bootstrap 3
提问by Mona Coder
Can you please take a look at following code and let me know why the image is not acting responsive in 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>
I test it on Bootstrap 2.3 and it was working fine ,Thanks
我在 Bootstrap 2.3 上进行了测试，效果很好，谢谢
回答by Zim
Add 'img-responsive` class to the img...
将 'img-responsive` 类添加到 img...
<img src="img/header.png" class="img-responsive" alt="DayCare" />
回答by Shadi Namrouti
You can do it easily using like this:
您可以像这样轻松地做到这一点：
<img src="img/header.png" style="width:100%; height:auto; display:block;" />
If width of the header image is smaller than the width of the screen, you should add the max-width in the style to keep the original width of the header in large views. For example, assuming the original width of the header is 600px, img should be like this:
如果标题图片的宽度小于屏幕宽度，则应在样式中添加 max-width 以保持大视图中标题的原始宽度。比如假设header原来的宽度是600px，img应该是这样的：
<img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" />
回答by bobybx
Agree with Skelly, img-responsive works well.
同意 Skelly 的观点，img-responsive 效果很好。
I tried with this code (Style.css removed), works fine.
我尝试使用此代码（已删除 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>
Try removing your Style.css
尝试删除您的 Style.css
