twitter-bootstrap Bootstrap 放大图片以占据整列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37170049/
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
Bootstrap enlarge picture to take up entire column
提问by caps lock
I'm using bootstrap and I have a row with 1 column and another row with 2 columns. All items have one picture in it, and should take up all the avaible space inside the column. So far I can't get the first image on the first row to fill the div width,this image resizes correctly when I reduce the window, but when I enlarge it, the picture will resize to its original maximum size when I want it to be always same as the div width
我正在使用引导程序，我有一行有 1 列，另一行有 2 列。所有项目都有一张图片，并应占据列内的所有可用空间。到目前为止，我无法获得第一行的第一张图像来填充 div 宽度，当我缩小窗口时，该图像会正确调整大小，但是当我放大它时，图片会在我想要它时调整到其原始最大尺寸始终与 div 宽度相同
Here is the snippet : https://jsfiddle.net/gd0obgg9/
这是片段：https: //jsfiddle.net/gd0obgg9/
Here is the code :
这是代码：
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio Item
</h1>
</div>
</div>
<div class="row">
<div></div>
<div class="col-md-12">
<img class="img-responsive" src="http://placehold.it/550x200" alt="">
</div>
<div></div>
</div>
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
I want my 550x200 to fill enterely the width Any advice ? thanks
我想要我的 550x200 来填充宽度有什么建议吗？谢谢
回答by Tico
If I understood you correctly, to give the image full width use:
如果我理解正确，请使用全宽图像：
.img-responsive {
width: 100%;
}
Note that this will, in some cases, distort the image to cover the full div
请注意，在某些情况下，这会扭曲图像以覆盖整个 div
In my test:
在我的测试中：
回答by Robert Cafazzo
Update your css to set the width of imgelements inside your columns to 100%.
更新您的 css 以将img列内元素的宽度设置为 100%。
回答by hacene abdessamed
you should add width:100%to your img
你应该添加width:100%到你的 img
here the new code
这里是新代码
<body>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<div class="row">
<div class="col-lg-12 col-xs-12 col-md-12">
<h1 class="page-header">Portfolio Item
<small>Item Subheading</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Item Row -->
<div class="row">
<div>
</div>
<div class="col-md-12">
<img class="img-responsive" style="width:100%" src="http://placehold.it/550x200" alt="">
</div>
<div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
