98

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

8 回答 8

85

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

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

于 2013-09-19T19:50:05.103 回答
18

确定的事情！

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

于 2015-04-17T03:38:19.463 回答
9

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

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

}

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

于 2013-11-29T20:57:10.067 回答
7

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

有一个带有 display: table & table-layout: fixed 的父 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/

于 2014-10-26T13:08:50.803 回答
4

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

.img-responsive{
  max-width: 100%;
  height: auto;
}
于 2015-09-25T01:35:13.320 回答
3

尝试这样做：

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;  
}
于 2015-02-19T09:26:15.957 回答
1

我发现你可以把 .col 类放在图像上就可以了——但是这会给它额外的填充以及与该类相关的任何其他属性，例如左浮动，但是可以通过说例如无填充来取消这些类作为补充。

于 2014-11-04T12:39:37.830 回答
-2

我猜图像比损坏。示例：图像大小为 195 像素 X 146 像素。

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

于 2014-03-15T14:43:58.953 回答