0

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>
Community
  • 1
  • 1
mastazi
  • 1,623
  • 26
  • 41

1 Answers1

2

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.

Sean Ryan
  • 6,048
  • 2
  • 25
  • 23
  • Until now I didn't move to bootstrap 3 only because I'm lazy. But this might be a very good reason to do so, thank you for the hint buddy. – mastazi Sep 28 '13 at 12:40
  • 2
    Although, having a look at the link you gave me, it looks like adding this class to bootstrap 2 is as easy as: `.img-responsive{max-width: 100%; height: auto;}` – mastazi Sep 28 '13 at 12:43
  • 1
    Yeah, I was going to suggest that you could just do that if you wanted to stay with v2 but be ready for a future migration to v3. You could also just do `img {max-width: 100%; height: auto;}` and not worry about classes if you knew that all of your images would need to be responsive. – Sean Ryan Sep 28 '13 at 19:03