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

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

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:

Solutions/Answers:

Solution 1:

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

Solution 2:

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.

Solution 3:

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

Solution 4:

If setting a fixed width on the image is not an option, here’s an alternative solution.

Having a parent div with display: table & 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:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

Fiddle: http://jsfiddle.net/5y62c4af/

Solution 5:

Try to do so:

1) In your index.html

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

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;  
}

Solution 6:

Try the following in your CSS stylesheet:

.img-responsive{
  max-width: 100%;
  height: auto;
}