使用bootstrap自动拉伸图像

时间:2014-04-15 14:40:44

标签: css twitter-bootstrap

我有一个1905像素宽的图像,我希望自动调整大小以适应引导程序读取的宽度。这似乎不起作用:

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

我必须使用css宽度吗?谢谢!

3 个答案:

答案 0 :(得分:13)

Bootstrap有一个帮助类来帮助图像响应:

.img-responsive

其中,与Ken的回答几乎相同:

.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

答案 1 :(得分:12)

.row > div > img { width: 100%; display: block; }

答案 2 :(得分:0)

添加此类用于bootstrap

.IMG响应