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