我正在使用 bootstrap 2.3.2 构建一个模板,我想拥有根据网格具有特定尺寸的图像。(我没有使用流体网格,但是我使用的是响应功能)。
我希望包含在例如 span4
div 中的图像会相应地缩小,即使它具有更大的分辨率,但它会以其实际像素大小显示。有没有办法根据div大小缩小图像?还是我必须在 css 中应用显式宽度?
我知道在普通 CSS 中,我可以通过这种方式实现我想要的:如何自动调整图像大小以适应div 容器,但我想知道在 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>
如果您使用 Bootstrap 2 进行设置,那么最好的选择就是按照您引用的问题进行操作,并在 CSS 中添加特定规则,因为 2.x 分支没有任何特定于响应式图像的内容。
另一个要考虑的选项是迁移到 Bootstrap 3,它确实有一个响应式图像帮助程序。它就像向任何图像添加.img-responsive
一样简单。有关更多详细信息,请参阅 3.x 文档:http://getbootstrap.com/css/#overview-responsive-images。