如何创建在 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="product"><div class="product-img"><img class="img-responsive" src="img/show1.png" alt=""/>

解决方案

Bootstrap 的响应式图像类将 max-width 设置为 100%.这限制了它的大小，但不会强制它拉伸以填充比图像本身更大的父元素.您必须使用 width 属性来强制放大.

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屋！