如何创建一个响应图像在twitter bootstrap 3 [英] How to create a responsive image in twitter bootstrap 3

问题描述

我目前使用twitter bootstrap 3，我面对一个问题，以创建一个响应的图像。我已经使用 img-responsive 类。但是图像大小没有按比例放大。如果我使用 width：100％而不是 max-width：100％哪里有问题？这是我的代码：

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的响应式图像类集 max-width 更改为100％。这限制了它的大小，但不强制它拉伸填充比图像本身更大的父元素。您必须使用 width 属性强制缩放。

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

这篇关于如何创建一个响应图像在twitter bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！