Menu
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> 
361
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
To make an image responsive in Bootstrap, add a class . img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Create responsive images by adding an . img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
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
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
