Twitter Bootstrap 2.3.2图像在非流体网格中

时间:2013-09-28 06:38:02

标签: html css twitter-bootstrap twitter-bootstrap-2

我正在使用bootstrap 2.3.2构建模板,我想根据网格获得具有特定尺寸的图像。 (我没有使用流体网格,但我使用的是响应功能)。

我希望包含的图像,例如在span4 div中,即使它具有更大的分辨率,也会相应地缩小,而是以其实际像素大小显示。有没有办法根据div大小缩小图像?或者我必须在CSS中应用显式宽度?

我知道在纯CSS中我可以用这种方式实现我想要的东西:How do I auto-resize an image to fit a div container但是我想知道在Bootstrap中是否有专用的类。

这是我的代码:

<div class="container">  
            <div class="row">
                <div class="span12">
                    <div class="row">
                        <div class="span4">
                            <img class="img-polaroid" src="public/images/h1.jpg" alt="" />
                        </div>
                        <div class="span8">
                            <img class="img-polaroid" src="public/images/h2.jpg" />
                        </div>
                    </div>
                </div>
            </div>
</div>

1 个答案:

答案 0 :(得分:2)

如果您使用Bootstrap 2设置,那么您最好的选择就是执行您引用的问题,并在CSS中添加特定规则,因为2.x分支没有特定于响应图像的任何内容。

另一个需要考虑的选择是转移到Bootstrap 3, 有一个响应式图像助手。就像向任何图像添加.img-responsive一样简单。有关详细信息,请参阅3.x文档:http://getbootstrap.com/css/#overview-responsive-images