How to create a responsive image that also scales up in Bootstrap 3

Question

I am currently using twitter bootstrap 3 and I am facing a problem to create a responsive image  I have used img-responsive class  But the image size is not scaling up  If I use width 100  instead of max-width 100  then it works perfectly   Where is the problem  This is my code        lt div class  col-md-4 col-sm-4 col-xs-12   gt           lt div class  product  gt                                  lt div class  product-img   gt                      lt img class  img-responsive  src  img show1 png  alt      gt                   lt  div gt                lt  div gt        lt  div gt

User · Answer

Bootstrap s responsive image class sets max-width to 100   This limits its size  but does not force it to stretch to fill parent elements larger than the image itself  You d have to use the width attribute to force upscaling   http   getbootstrap com css  images-responsive

User · Answer

Not sure if it helps you still    but I had to do a small trick to make the image bigger but keeping it responsive   media screen and  max-width  368px        img smallResolution          min-height  150px             Hope it helps P S  The max width can be anything you like

User · Answer

I guess image is than corrupted  Example  image size is 195px X 146px   It will work inside lower resolutions like tablets  When you have 1280 X 800 resolution it will force larger as there is also width 100    Maybe CSS inside media query like icons fonts is the best solution

User · Answer

If setting a fixed width on the image is not an option  here s an alternative solution   Having a parent div with display  table  amp  table-layout  fixed  Then setting the image to display  table-cell and max-width to 100   That way the image will fit to the width of its parent   Example    lt style gt       wrapper   float  left  clear  left  display  table  table-layout  fixed        img img-responsive   display  table-cell  max-width  100      lt  style gt   lt div class  wrapper col-md-3  gt       lt img class  img-responsive  src  https   www google co uk images srpr logo11w png   gt   lt  div gt    Fiddle  http   jsfiddle net 5y62c4af

User · Answer

Try the following in your CSS stylesheet    img-responsive    max-width  100     height  auto

User · Answer

I found that you can put the  col class on the image will do the trick - however this gives it extra padding along with any other attributes associated with the class such as float left  however these can be cancelled by say for example a no padding class as an addition

User · Answer

Sure things    img-responsive is the right way to make images responsive with bootstrap 3 You can add some height rule for the picture you want to make responsive  because with responsibility  width changes along the height  fix it and there you are

User · Answer

Try to do so   1  In your index html   lt div class  col-lg-3 col-md-4 col-xs-6 thumb  gt     lt a class  thumbnail  href     gt       lt div class  ratio  style  background-image url     Images img1 jpg    gt  lt  div gt     lt  a gt   lt  div gt    2  In your style css   ratio     position relative    width  100     height  0    padding-bottom  50      background-repeat  no-repeat    background-position  center center    background-size  cover

[javascript] How to create a responsive image that also scales up in Bootstrap 3

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap