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>
This question is related to
javascript
jquery
html
css
twitter-bootstrap
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.
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.
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
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.
.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.
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/
Try the following in your CSS stylesheet:
.img-responsive{
max-width: 100%;
height: auto;
}
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;
}
Source: Stackoverflow.com