如何创build一个在Bootstrap 3中也可以扩展的响应式图像
我目前正在使用twitter引导3，我面临一个问题，以创build一个响应式图像。 我用过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属性来强制升级。
当然可以！
.img-responsive是使图像响应bootstrap的正确方法3您可以为要响应的图像添加一些高度规则，因为在责任的情况下，宽度会沿着高度变化，修复它并在那里。
不知道它是否对你有帮助，但是我必须做一些小技巧来使图像更大，但保持响应
@media screen and (max-width: 368px) { img.smallResolution{ min-height: 150px; } }
希望它有助于PS最大宽度可以是任何你喜欢的
如果在图像上设置固定宽度不是一个选项，这里是一个替代解决scheme。
具有显示的父级div：table＆table-layout：fixed。 然后设置图像显示：表格单元格和最大宽度为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.ukhttp://img.dovov.comsrpr/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类做的伎俩 – 但是这给了它额外的填充以及任何其他与类相关的属性，例如float left，但是这些可以通过例如没有填充来取消class级作为一个补充。
我猜想图像是损坏的。 例如：图像大小是195px x 146px。
它将在像平板电脑这样的较低分辨率内工 当你有1280×800的分辨率时，它会强制更大，因为宽度也是100％。 也许CSS里面的媒体查询像图标字体是最好的解决scheme。
使用{最大宽度：100％}将正常工作，但类图像响应更多地根据屏幕分辨率和图像纵横比调整图像，它从来没有一个很好的方法来拉伸图像。
