如何创建在 Bootstrap 3 中也可以放大的响应式图像答案

【问题标题】：How to create a responsive image that also scales up in Bootstrap 3如何创建在 Bootstrap 3 中也可以放大的响应式图像
【发布时间】：2013-09-25 00:57:21
【问题描述】：

我目前正在使用 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>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我必须做一个小技巧来使图像更大但保持响应：

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

}

附：最大宽度可以是任何你喜欢的。

【讨论】：

这不会导致图像显示的宽度超过其原始尺寸。

【解决方案3】：

我猜图像已损坏。示例：图片大小为 195px X 146px。

它适用于平板电脑等较低分辨率的设备。当您有 1280 X 800 分辨率时，它会强制更大，因为还有 100 % 的宽度。也许像图标字体这样的媒体查询中的 CSS 是最好的解决方案。

【讨论】：

【解决方案4】：

如果在图像上设置固定宽度不是一个选项，这里有一个替代解决方案。

有一个带有 display: table & table-layout: 固定的父 div。然后设置要显示的图像：table-cell 和 max-width 为 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/

【讨论】：

【解决方案5】：

我发现您可以将 .col 类放在图像上就可以解决问题 - 但是这会为它提供额外的填充以及与该类关联的任何其他属性，例如左浮动，但是这些可以通过例如取消一个无填充类作为添加。

【讨论】：

【解决方案6】：

尝试这样做：

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

【讨论】：

【解决方案7】：

没问题！

.img-responsive 是使用 bootstrap 3 使图像响应的正确方法你可以为你想要做出响应的图片添加一些高度规则，因为有责任，宽度会沿着高度变化，修复它就可以了。

【讨论】：

【解决方案8】：

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

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

【讨论】：