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

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

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

当然可以！

.img-responsive 是使用Bootstrap 3使图像具有响应能力的正确方法。您可以为要响应的图片添加一些高度规则，因为有了责任，宽度会随着高度的变化而改变，并固定在那里。

不知道它是否对您仍然有帮助...但是我不得不做一个小技巧，使图像更大，但保持响应

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

希望对您有所帮助PS最大宽度可以是您喜欢的任何值

如果不能在图像上设置固定宽度，则可以选择其他解决方案。

父div具有display：table和table-layout：已修复。然后将图像设置为显示：table-cell，最大宽度为100％。这样，图像将适合其父对象的宽度。

例：

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

小提琴：http : //jsfiddle.net/5y62c4af/

在CSS样式表中尝试以下操作：

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

尝试这样做：

1）在您的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）在你的style.css中

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

我发现您可以在图像上放置.col类来解决问题-但这给它提供了额外的填充以及与该类关联的任何其他属性（例如向左浮动），但是可以通过例如取消填充来取消这些填充类作为补充。

我想图像比损坏的要好。范例：图片大小为195像素X 146像素。

它可以在平板电脑等较低的分辨率下使用。当您具有1280 X 800分辨率时，由于宽度也为100％，它将迫使较大。也许像图标字体这样的媒体查询中的CSS是最佳解决方案。