How to create a responsive image that also scales

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:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Answer 1

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.

Answer 2

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