如何创建一个响应图像，也放大在 Bootstrap 3

我目前正在使用 Bootstrap 3，我正面临一个问题，以创建一个响应图像。我用过 img-responsive类。但是图像尺寸没有放大。如果我使用 width:100%而不是 max-width:100%，那么它的工作完美。问题出在哪里？这是我的暗号:

    <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>
292957 次浏览
小开

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

小开

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


}

P.S. The max width can be anything you like.

小开

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.

小开

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/

小开

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.

小开

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

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.

小开

Try the following in your CSS stylesheet:

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

提交答案