如何创建一个在Bootstrap 3中也可以扩展的响应式图像 [英] How to create a responsive image that also scales up in Bootstrap 3

问题描述

我目前使用的是twitter 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> 
 < / div> 
< / div> 
< / div> 
  

解决方案

Bootstrap的响应式图像类设置最大宽度到100％。这会限制其大小，但不会强制它进行拉伸以填充大于图像本身的父元素。您必须使用宽度属性强制升级。

http://getbootstrap.com/css/#images-responsive

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'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

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