CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jesicadev18
jesicadev18

Reputation: 3162

Image sizes in bootstrap col-div

I have a page in three columns with col-md-4 like a thumbnail approach and then I have another page with col-md-8. In both I have to show an image, and I wondered if I can use the same image for both or if it would be better to have 2 images ( each with the propper size ).

<div class="col-md-4 col-sm-4">
   <div class="product">

         <a href="">
             <img src="/media/{{ p.img }}" style="max-width: 100%;max-height: 100%;/>                                         </a>

     <div class="text">
         <h3>Some text</h3>
     </div>
</div>


#product img{
max-width: 100%;
max-height: 100%;
}

How can I resize the image to fit both, the 3 column grid and the 8 column with ( and keeping it responsive ).

Is it better to have two different images ? (one big and one small).

Upvotes: 0

Views: 6011

Answers (1)

Tish
Tish

Reputation: 54

Use class="img-responsive" on the images.

http://getbootstrap.com/css/#images See the documentation for responsive images. The image will scale to the column size.

You should use the a format that fits in the larger column as images typically will scale down but become pixelated when scaling up.

The downside to using a large image in small slot is the larger the image typically the larger the file size and thus the slower to load, especially when dealing with mobile phones on 3g.

Upvotes: 1

Related Questions