Twitter Bootstrap 2.3.2 image in non-fluid grid

Question

I am building a template with bootstrap 2.3.2 and I want to have images that have certain dimensions according to the grid. (I'm not using the fluid grid, however I am using the responsive features).

I expect that the image which is contained e.g. in a span4 div would shrink accordingly even if it has a larger resolution, but instead it is shown at its real pixel size. Is there a way to shrink the image according to the div size? Or do I have to apply an explicit width in the css?

I know that in plain CSS I could achieve what I want in this way: How do I auto-resize an image to fit a div container but I was wondering if in Bootstrap there is a dedicated class for this.

Here's my code:

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

Answer 1

If you are set using Bootstrap 2, then your best bet is just to do what the question you referenced says, and add a specific rule in your CSS, as the 2.x branch does not have anything specific for responsive images.

Another option to consider would be to move to Bootstrap 3, which does have a responsive image helper. It is as simple as adding .img-responsive to any image. See the 3.x docs for more details at: http://getbootstrap.com/css/#overview-responsive-images.