CSS 使用引导程序自动拉伸图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23086987/
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
Auto stretch image with bootstrap
提问by mishap
I have a 1905px wide image and I was hoping to make it auto resize to fit the width read by bootstrap. This doesn't seem to work :
我有一个 1905px 宽的图像，我希望让它自动调整大小以适应引导程序读取的宽度。这似乎不起作用：
<div class="body container-fluid">
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12">
<img src="~/Content/Images/Temp/WP_20140326_001.jpg" />
</div>
</div>
</div>
Do I have to use css width ? Thank you !
我必须使用 css 宽度吗？谢谢 ！
回答by MackieeE
Bootstrap has a helper class to help images to be responsive:
Bootstrap 有一个帮助类来帮助图像响应：
.img-responsive
.img-responsive
Which, entails practically the same as Ken's answer:
这与肯的回答几乎相同：
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
Bootstrap Github .img-responsive
引导程序 Github .img-responsive
回答by Ken Wheeler
.row > div > img { width: 100%; display: block; }
回答by Mahdi Salehian
add this class that is for bootstrap
添加这个用于引导的类
.img-responsive
.img 响应
